मॉड्यूल वर्कर से वेब पर थ्रेड की सुविधा

वेब वर्कर में JavaScript मॉड्यूल की मदद से, अब बैकग्राउंड थ्रेड पर काम करना आसान हो गया है.

Jason Miller

JavaScript सिंगल-थ्रेड वाला होता है. इसका मतलब है कि यह एक समय पर सिर्फ़ एक कार्रवाई कर सकता है. यह है और वेब पर कई मामलों में काम करता है. हालांकि, जब हमें इसकी ज़रूरत पड़ती है, तो इनसे समस्या हो सकती है मुश्किल कामों को आसानी से पूरा किया जा सकता है. जैसे, डेटा प्रोसेसिंग, पार्स करना, कंप्यूटेशन या विश्लेषण करना. ज़्यादा से ज़्यादा और ज़्यादा से ज़्यादा जटिल ऐप्लिकेशन वेब पर डिलीवर किए जाते हैं, इसलिए मल्टी-थ्रेड की ज़रूरत बढ़ गई है प्रोसेस चल रही है.

वेब प्लैटफ़ॉर्म पर, थ्रेडिंग और साथ-साथ काम करने के लिए, वेब Workers API. कर्मचारी ऑपरेटिंग सिस्टम में एक सामान्य विकल्प हैं ऐसे थ्रेड जो मैसेज भेजने वाले एपीआई को दिखाते हैं का इस्तेमाल करें. महंगा कंप्यूटेशन (हिसाब लगाना) करते समय या बड़े डेटासेट पर काम कर रहा है, जिससे मुख्य थ्रेड ठीक से काम कर पाता है. साथ ही, एक या ज़्यादा बैकग्राउंड थ्रेड पर महंगे ऑपरेशन की ज़रूरत होती है.

यहां वर्कर के इस्तेमाल का एक खास उदाहरण दिया गया है. इसमें वर्कर स्क्रिप्ट मुख्य स्क्रीन से मैसेज सुनती है थ्रेड और जवाब देने के लिए खुद के मैसेज भेजें:

page.js:

const worker = new Worker('worker.js');
worker.addEventListener('message', e => {
  console.log(e.data);
});
worker.postMessage('hello');

worker.js:

addEventListener('message', e => {
  if (e.data === 'hello') {
    postMessage('world');
  }
});

Web Worker API, ज़्यादातर ब्राउज़र में दस साल से ज़्यादा समय से उपलब्ध है. हालांकि, इसका मतलब है कि कर्मचारियों को ब्राउज़र के लिए बेहतरीन सपोर्ट मिलता है और वे अच्छी तरह से ऑप्टिमाइज़ होते हैं. इसका मतलब यह भी है कि वे से पहले का JavaScript मॉड्यूल. वर्कर के डिज़ाइन किए जाने के दौरान कोई मॉड्यूल सिस्टम नहीं था, इसलिए एपीआई किसी वर्कर में कोड लोड करने और स्क्रिप्ट बनाने के लिए, ये उस सिंक्रोनस स्क्रिप्ट के समान रहे साल 2009 में, लोड होने के तरीके आम तौर पर सामने आए.

इतिहास: क्लासिक वर्कर

Worker कंस्ट्रक्टर एक क्लासिक स्क्रिप्ट का यूआरएल, जो कि दस्तावेज़ के यूआरएल के मुताबिक होना चाहिए. यह तुरंत नए वर्कर इंस्टेंस का रेफ़रंस देता है, यह मैसेज इंटरफ़ेस के साथ-साथ terminate() तरीका दिखाता है, जो तुरंत रुक जाता है और तबाह हो जाता है.

const worker = new Worker('worker.js');

अतिरिक्त कोड लोड करने के लिए, वेब वर्कर के अंदर एक importScripts() फ़ंक्शन उपलब्ध होता है, लेकिन यह हर स्क्रिप्ट को फ़ेच करने और उसका आकलन करने के लिए, वर्कर के एक्ज़ीक्यूशन को रोक देता है. यह स्क्रिप्ट को भी एक्ज़ीक्यूट करता है में ग्लोबल स्कोप शामिल है, जैसे कि क्लासिक <script> टैग. इसका मतलब है कि एक स्क्रिप्ट में वैरिएबल को किसी अन्य वैरिएबल के वैरिएबल से बदल दिया जाता है.

worker.js:

importScripts('greet.js');
// ^ could block for seconds
addEventListener('message', e => {
  postMessage(sayHello());
});

greet.js:

// global to the whole worker
function sayHello() {
  return 'world';
}

इस कारण से, वेब कर्मियों ने ऐतिहासिक रूप से का इस्तेमाल करें. डेवलपर को कई मज़ेदार टूल और समाधान बनाने पड़े, ताकि सभी काम आसानी से किए जा सकें आधुनिक विकास के तरीकों को छोड़े बिना वेब वर्कर का इस्तेमाल करना. उदाहरण के लिए, बंडलर Webpack, importScripts() का इस्तेमाल करने वाले जनरेट किए गए कोड में एक छोटा मॉड्यूल लोडर इंप्लीमेंटेशन एम्बेड करता है कोड लोडिंग के लिए, लेकिन परिवर्तनीय टकरावों से बचने और सिम्यूलेशन के लिए फ़ंक्शन में मॉड्यूल को रैप करता है डिपेंडेंसी इंपोर्ट और एक्सपोर्ट.

मॉड्यूल वर्कर डालें

JavaScript के एर्गोनॉमिक्स और प्रदर्शन संबंधी फ़ायदों के साथ वेब कर्मियों के लिए एक नया मोड मॉड्यूल, Chrome 80 में शिपिंग का काम करता है. इसे मॉड्यूल वर्कर कहा जाता है. कॉन्टेंट बनाने अब Worker कंस्ट्रक्टर, एक नए {type:"module"} विकल्प को स्वीकार करता है. इससे, स्क्रिप्ट लोड होना और दिखने में बदलाव होता है <script type="module"> से मिलान करने के लिए निष्पादन.

const worker = new Worker('worker.js', {
  type: 'module'
});

मॉड्यूल वर्कर, स्टैंडर्ड JavaScript मॉड्यूल हैं. इसलिए, वे इंपोर्ट और एक्सपोर्ट स्टेटमेंट का इस्तेमाल कर सकते हैं. जैसे सभी JavaScript मॉड्यूल के साथ, डिपेंडेंसी दिए गए कॉन्टेक्स्ट (मुख्य थ्रेड, वर्कर, वगैरह) और आने वाले समय में किए जाने वाले सभी इंपोर्ट, पहले से लागू मॉड्यूल इंस्टेंस से जुड़े होते हैं. लोडिंग और JavaScript मॉड्यूल को एक्ज़ीक्यूट करने की सुविधा को भी ब्राउज़र ऑप्टिमाइज़ करते हैं. मॉड्यूल की डिपेंडेंसी ये हो सकती हैं: यह मॉड्यूल, मॉड्यूल के एक्ज़ीक्यूट होने से पहले लोड होता है. इससे पूरे मॉड्यूल ट्री को लोड किया जा सकता है साथ-साथ. मॉड्यूल लोडिंग पार्स किए गए कोड को भी कैश मेमोरी में सेव करती है. इसका मतलब है कि मुख्य पेज पर इस्तेमाल किए जाने वाले मॉड्यूल थ्रेड और वर्कर में सिर्फ़ एक बार पार्स करने की ज़रूरत है.

JavaScript मॉड्यूल का इस्तेमाल करने से डाइनैमिक इंपोर्ट उस कर्मचारी को क्या करना है. डिपेंडेंसी लोड करने के लिए importScripts() का इस्तेमाल करने की तुलना में, डाइनैमिक इंपोर्ट की सुविधा ज़्यादा साफ़ तौर पर बताती है, क्योंकि इंपोर्ट किए गए मॉड्यूल का एक्सपोर्ट, ग्लोबल वैरिएबल पर निर्भर होने के बजाय वापस आता है.

worker.js:

import { sayHello } from './greet.js';
addEventListener('message', e => {
  postMessage(sayHello());
});

greet.js:

import greetings from './data.js';
export function sayHello() {
  return greetings.hello;
}

बेहतरीन परफ़ॉर्मेंस बनाए रखने के लिए, मॉड्यूल में पुराना importScripts() तरीका उपलब्ध नहीं है कर्मचारी. कर्मियों को JavaScript मॉड्यूल का इस्तेमाल करने के लिए स्विच करने का मतलब है कि सभी कोड स्ट्रिक्ट मोड है. अन्य ध्यान देने लायक बदलाव यह है कि JavaScript मॉड्यूल के टॉप-लेवल दायरे में this का मान है undefined की तरह है, जबकि क्लासिक वर्कर में वैल्यू, वर्कर का ग्लोबल स्कोप होता है. अच्छी बात यह है कि हमेशा से self ग्लोबल रहा है, जो ग्लोबल स्कोप का रेफ़रंस देता है. यह इन भाषाओं में उपलब्ध है सभी तरह के वर्कर के साथ-साथ सर्विस वर्कर और DOM में.

modulepreload के साथ वर्कर को पहले से लोड करें

मॉड्यूल वर्कर की मदद से, परफ़ॉर्मेंस में एक बड़ा सुधार होता है. इसके लिए, पहले से लोड करने की सुविधा होती है और उनकी डिपेंडेंसी के हिसाब से काम करता है. मॉड्यूल वर्कर की मदद से, स्क्रिप्ट लोड होकर स्टैंडर्ड के तौर पर लागू होती हैं JavaScript मॉड्यूल का मतलब है कि उन्हें modulepreload का इस्तेमाल करके पहले से लोड किया जा सकता है और पहले से पार्स भी किया जा सकता है:

<!-- preloads worker.js and its dependencies: -->
<link rel="modulepreload" href="worker.js">

<script>
  addEventListener('load', () => {
    // our worker code is likely already parsed and ready to execute!
    const worker = new Worker('worker.js', { type: 'module' });
  });
</script>

पहले से लोड किए गए मॉड्यूल का इस्तेमाल, मुख्य थ्रेड और मॉड्यूल वर्कर, दोनों के लिए भी किया जा सकता है. यह इनके लिए काम का है दोनों कॉन्टेक्स्ट में इंपोर्ट किए जाने वाले मॉड्यूल या ऐसे मामलों में जिनके बारे में पहले से पता करना मुमकिन न हो कि किसी मॉड्यूल का इस्तेमाल मुख्य थ्रेड पर किया जाएगा या किसी वर्कर में.

पहले, वेब वर्कर स्क्रिप्ट को पहले से लोड करने के लिए सीमित विकल्प उपलब्ध होते थे. मदद करता है. क्लासिक मक्खियों के पास खुद का "कर्मचारी" होता था पहले से लोड करने के लिए संसाधन टाइप है, लेकिन नहीं <link rel="preload" as="worker"> लागू किए गए ब्राउज़र. इस वजह से, मुख्य तकनीक पहले से लोड करने वाले वेब कर्मियों के लिए उपलब्ध <link rel="prefetch"> का इस्तेमाल करना था, जो पूरी तरह से पर जा सकता है. सही कैश मेमोरी हेडर के साथ इस्तेमाल करने पर, ऐसा हो सका वर्कर स्क्रिप्ट डाउनलोड करने के लिए इंतज़ार करने की ज़रूरत नहीं होती. हालांकि, आम तौर पर modulepreload इस तकनीक में, पहले से लोड की गई डिपेंडेंसी या पहले से पार्स करने की सुविधा काम नहीं करती.

इनके साथ काम करने वाले लोग कैसे काम करते हैं?

शेयर किए गए कर्मचारियों के पास को Chrome 83 के बाद से अपडेट किया गया है. साथ ही, इसे JavaScript मॉड्यूल के लिए काम करने की सुविधा के साथ अपडेट किया गया है. खास आपके लिए काम करने वाले कर्मचारियों की तरह, {type:"module"} विकल्प के साथ शेयर किए गए वर्कर को बनाने पर, वर्कर स्क्रिप्ट मॉड्यूल को शामिल करें:

const worker = new SharedWorker('/worker.js', {
  type: 'module'
});

JavaScript मॉड्यूल के साथ काम करने से पहले, SharedWorker() कंस्ट्रक्टर को सिर्फ़ यूआरएल और एक वैकल्पिक name तर्क. यह 'शेयर किए गए कर्मचारी' के क्लासिक वर्शन के इस्तेमाल के लिए काम करता रहेगा; हालांकि शेयर किए गए मॉड्यूल बनाने के लिए, नए options आर्ग्युमेंट का इस्तेमाल करना ज़रूरी है. उपलब्ध विकल्प खास तौर पर काम करने वाले कर्मचारियों के लिए सामान्य सेटिंग से मिलती-जुलती हैं. इसमें name का विकल्प भी शामिल है, जो इसकी जगह लेगा पिछला name तर्क.

सर्विस वर्कर का क्या होगा?

सर्विस वर्कर स्पेसिफ़िकेशन पहले ही तय हो चुकी है अपडेट किया गया एंट्री पॉइंट के तौर पर JavaScript मॉड्यूल, मॉड्यूल वर्कर वाले {type:"module"} विकल्प का इस्तेमाल करके, हालांकि यह बदलाव अभी ब्राउज़र में लागू किया गया है. इसके बाद, का इस्तेमाल, नीचे दिए गए कोड की मदद से JavaScript मॉड्यूल का इस्तेमाल करके सर्विस वर्कर को इंस्टैंशिएट करने के लिए किया जाता है:

navigator.serviceWorker.register('/sw.js', {
  type: 'module'
});

अब जब खास जानकारी अपडेट हो चुकी है, तो ब्राउज़र इस नए बदलाव को लागू करना शुरू कर रहे हैं. इसमें समय लगता है, क्योंकि JavaScript को फ़ेच करने से जुड़ी कुछ अतिरिक्त समस्याएं होती हैं सर्विस वर्कर के लिए मॉड्यूल. सर्विस वर्कर रजिस्ट्रेशन के लिए, इंपोर्ट की गई स्क्रिप्ट की तुलना करनी होगी कैश मेमोरी में सेव किए गए पिछले वर्शन के साथ तब यह तय करना कि अपडेट को ट्रिगर करना है या नहीं. साथ ही, इसे JavaScript मॉड्यूल के लिए लागू किया जाना चाहिए जब इसका इस्तेमाल सर्विस वर्कर के लिए किया जाता है. साथ ही, सर्विस वर्कर को कैश मेमोरी में सेव करने की सुविधा अपडेट देखा जा रहा है.

अतिरिक्त संसाधन और आगे का लेख