WXHR: वेब वर्कर्स के स्वाद के साथ अच्छा पुराना XHR

ऐसी परिस्थितियाँ होती हैं जब किसी वेब एप्लिकेशन को सर्वर से डेटा का एक गुच्छा लेने की आवश्यकता होती है, इसे डिकोड करना और इसे अपने गंतव्य पर भेजना। इसका एक उदाहरण एक ऑनलाइन 3 डी संपादक हो सकता है, जहां प्रत्येक मॉडल gzip'an json'e में कई मेगाबाइट पर कब्जा कर सकता है।

डेटा डाउनलोड करने और अनपैक करते समय औसत उपयोगकर्ता का ब्राउज़र सेकंड या उससे अधिक के लिए जमा हो जाता है तो क्या करें?
1. फ्लैश पर कुछ के साथ आओ (मुझे 100% यकीन नहीं है, लेकिन कुछ ब्राउज़र मुख्य थ्रेड में प्लगइन्स लॉन्च करते हैं)
2. टुकड़ों में डेटा लोड करें, टुकड़ों में प्रक्रिया करें।
3. उपयोगकर्ता से कंप्यूटर को अपग्रेड करने के लिए कहें।

सभी 3 विकल्प बहुत सही नहीं हैं?

कटौती के तहत, इस समस्या के लिए एक सुरुचिपूर्ण समाधान (अनावश्यक स्क्रिप्ट और ऐप कोड के बिना)।

वेब कर्मचारी हमारी सहायता के लिए आते हैं, जो सौभाग्य से, अंदर एक xhr इंटरफ़ेस है।

हमें श्रमिकों के साथ अच्छे पुराने XHR को नमक करने की आवश्यकता है, लेकिन हमें ऐसा करने की आवश्यकता है ताकि XHR के पुराने संस्करण का उपयोग करने वाली स्क्रिप्ट स्पूफिंग पर ध्यान न दें। और पुराने ब्राउज़र, श्रमिकों के समर्थन के बिना, पहले की तरह काम करेंगे।
मैं आधार के रूप में प्रो जावास्क्रिप्ट डिज़ाइन पैटर्न (7.03 - XHR फ़ैक्टरी उदाहरण) से xhr स्क्रिप्ट का उपयोग करूंगा।
हमारे xhr स्क्रिप्ट को 3 मोड में काम करना चाहिए: पुराने ब्राउज़रों के लिए xhr, wxhr host, wxhr कार्यकर्ता।

कार्य का तर्क निम्नानुसार होगा:
0. उपयोगकर्ता xhr.request चलाता है
1. यदि ब्राउज़र श्रमिकों को नहीं रखता है, तो हम पहले की तरह काम करते हैं
2. यदि ब्राउज़र फिर भी, अनुरोध विधि में, कार्यकर्ता (wxhr.js) को स्पॉन करता है और अनुरोध को निष्पादित नहीं करता है,
2.1 हम कार्यकर्ता के लिए उपयुक्त घटनाओं को लटकाते हैं, पोस्टमासेज के माध्यम से कार्यकर्ता के अनुरोध को प्रॉक्सी करते हैं
3. wxhr.js स्क्रिप्ट को एक कार्यकर्ता के रूप में लॉन्च किया गया है, स्क्रिप्ट समझती है कि यह अब कार्यकर्ता मोड में काम कर रही है और एक संदेश ईवेंट को लटका देती है
3.1 स्क्रिप्ट अनुरोध प्राप्त करता है,
3.2 एक नियमित xhr ऑब्जेक्ट बनाता है,
3.3 सामान्य xhr.request करता है,
3.4 डेटा संसाधित करता है, डेटा को उसके होस्ट में स्थानांतरित करता है,
3.5 होस्ट कार्यकर्ता द्वारा संसाधित डेटा के साथ कॉलबैक करता है।

पैच xhr उर्फ ​​wxhr:

/** * @fileOverview WXHR Request - Web Worker XHR * * @example * <pre> * var myHandler = new global.xhr(true), // enable workers * myHandler2 = new global.xhr(), // worker mode is disabled by default * data = { * method: 'GET', * url: 'test.txt', * success: function (data, isWorker) { * alert(data + (isWorker ? ' XHR called from Worker' : ' XHR called from Window')); * }, * error: function (status) { * alert(status); * } * }; * * myHandler.request(data); * myHandler2.request(data); * </pre> * * @author azproduction */ /**#nocode+*/ (function (global) { /**#nocode-*/ // Upgrade 1 - - - - - - - - - - - - - - - - - - - - - - - - - - - - var xhr = function (canUseWorkers) { this.canUseWorkers = (typeof canUseWorkers === 'undefined') ? false : !!canUseWorkers; }, // detect workers support workersSupported = typeof global.Worker !== 'undefined', // detect mode itIsWindow = typeof global.document !== 'undefined'; // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - xhr.prototype = { request: function(params) { params.method = params.method.toUpperCase() || 'GET'; params.url = params.url || ''; params.postVars = params.method !== 'POST' ? (params.postVars || null) : null; params.success = params.success || function () {}; params.error = params.error || function () {}; // Upgrade 2 - - - - - - - - - - - - - - - - - - - - - - - - - - - - if (this.canUseWorkers && workersSupported && itIsWindow) { // use advanced wxhr var worker; // this is bad part mb createObjectURL will save in future worker = new global.Worker('wxhr.js'); // <<< bad worker.onmessage = function(e) { var data = e.data; // proxy response // @todo delete true parameter in Production! params[data.callback](data.data, true); }; // if worker throws error query fails worker.error = function(e) { params.error(0); }; // worker proxy request worker.postMessage({ method: params.method, url: params.url, postVars: params.postVars }); return; } // browser do not support workers or script is already works as Worker // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - var xhr = (this.createXhrObject())(), self = this; xhr.onreadystatechange = function() { try { if (xhr.readyState !== 4) { return; } self.processResponse(params, { status: xhr.status, responseText: xhr.responseText, contentType: xhr.getResponseHeader('Content-type') }); } catch (e) { params.error(xhr.status); } }; xhr.open(params.method, params.url, true); xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); xhr.send(params.postVars); }, createXhrObject: function() { // Factory method. var methods = [ function() { return new XMLHttpRequest(); }, function() { return new ActiveXObject('Msxml2.XMLHTTP'); }, function() { return new ActiveXObject('Microsoft.XMLHTTP'); } ]; for (var i = 0, len = methods.length; i < len; i++) { try { methods[i](); } catch(e) { continue; } // If we reach this point, method[i] worked. this.createXhrObject = methods[i]; // Memoize the method. return methods[i]; } // If we reach this point, none of the methods worked. throw new Error('SimpleHandler: Could not create an XHR object.'); }, processResponse: function (params, xhr) { if (xhr.status === 200) { if (xhr.contentType.match(/^application\/json/)) { params.success(JSON.parse(xhr.responseText)); } else { params.success(xhr.responseText); } } else { params.error(xhr.status); } } }; // Upgrade 3 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - if (!itIsWindow) { // worker mode: listen for requests global.addEventListener('message', function(e) { var data = e.data; // proxy success data.success = function (data) { global.postMessage({ callback: 'success', data: data }); }; // proxy error data.error = function (status) { global.postMessage({ callback: 'error', data: status }); }; var xhrRequest = new xhr(); xhrRequest.request(data); }, false); } else { // script mode: export xhr global.xhr = xhr; } // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - // global.xhr = xhr; /**#nocode+*/ }(this)); /**#nocode-*/ 

काम का उदाहरण: azproduction.ru/wxhr

मैं wxhr का उपयोग करने की अनुशंसा नहीं करता जहाँ कहीं भी हो, यह केवल उन मामलों में आवश्यक है जहां बड़ी मात्रा में इनपुट डेटा को संसाधित करना आवश्यक है, अन्य मामलों में यह हमेशा मुख्य धारा (श्रमिकों के स्पॉन, डबल डेटा ट्रांसफर) से xhr से नीच होगा। कुछ ब्राउज़रों में, विशेष रूप से सफारी में, पोस्टमैसेज भेजने से पहले डेटा को जोंस में एनकोड करता है, और इसे प्राप्त होने पर डिकोड करता है। ताकि नियमित रूप से xhr से भी बदतर हो सकता है।

एक परीक्षण का आयोजन किया: 2 समान अनुरोधों को लॉन्च किया, कैश को दरकिनार करते हुए, पहले wxhr दूसरा xhr भेजा। क्रोम में ff और सफारी 100% मामलों में wxhr दूसरे में, ओपेरा में 75% wxhr दूसरे नंबर पर आया। डेटा 6 बाइट्स + हेडर।