इस कोर्स का अब तक का ज़्यादातर कॉन्टेंट, एचटीएमएल की परफ़ॉर्मेंस से जुड़ी सामान्य बातों, रिसॉर्स से जुड़े संकेतों, अलग-अलग तरह के संसाधनों को ऑप्टिमाइज़ करने जैसे कॉन्सेप्ट पर फ़ोकस करता है. इससे, पेज लोड होने में लगने वाले शुरुआती समय को बेहतर बनाने में मदद मिलती है. साथ ही, उपयोगकर्ता के इनपुट मिलने में देरी हो सकती है.
हालांकि, JavaScript से जुड़ी परफ़ॉर्मेंस का एक पहलू अभी तक इस कोर्स में शामिल नहीं किया गया है. इनपुट रिस्पॉन्स को बेहतर बनाने में वेब वर्कर की भूमिका है. इस पहलू के बारे में इस और अगले मॉड्यूल में बताया गया है.
JavaScript को अक्सर सिंगल-थ्रेड भाषा के तौर पर बताया जाता है. व्यावहारिक तौर पर, यह मुख्य थ्रेड का संदर्भ देता है, जो एक ऐसा थ्रेड है जहां ब्राउज़र ज़्यादातर काम करता है जो आपको ब्राउज़र में दिखते हैं. इस काम में, स्क्रिप्टिंग, रेंडरिंग के कुछ तरीके, एचटीएमएल और सीएसएस पार्स करने, और उपयोगकर्ता को बेहतर अनुभव देने वाले दूसरे तरह के टास्क शामिल होते हैं. सही मायनों में, ब्राउज़र दूसरे थ्रेड का इस्तेमाल ऐसे काम करने के लिए करते हैं जिनका ऐक्सेस डेवलपर के पास न हो, जैसे कि जीपीयू थ्रेड का.
जहां JavaScript का सवाल है, वहां आम तौर पर मुख्य थ्रेड पर ही काम किया जाता है—लेकिन डिफ़ॉल्ट रूप से. JavaScript में अतिरिक्त थ्रेड को रजिस्टर किया जा सकता है और उनका इस्तेमाल किया जा सकता है. JavaScript में एक से ज़्यादा थ्रेड की अनुमति देने वाली सुविधा को Web Workers API कहा जाता है.
वेब वर्कर तब काम आते हैं, जब आपके पास कंप्यूटेशनल तौर पर महंगा कोई काम होता है और आपको मुख्य थ्रेड पर नहीं चलाया जा सकता. ऐसा तब होता है, जब लंबे टास्क किए बिना, पेज काम नहीं करता. ऐसे टास्क, आपकी वेबसाइट के इंटरैक्शन टू नेक्स्ट पेंट (आईएनपी) पर ज़रूर असर डाल सकते हैं. इसलिए, यह जानना मददगार होगा कि आपके पास ऐसा काम है या नहीं जिसे मुख्य थ्रेड से हटाया जा सकता है. ऐसा करने से, मुख्य थ्रेड पर दूसरे टास्क करने के लिए ज़्यादा जगह बनाई जा सकती है, ताकि उपयोगकर्ता इंटरैक्शन तेज़ी से कर सके.
इस मॉड्यूल और इसके बाद के डेमो में, इस्तेमाल का बेहतर उदाहरण दिखाया गया है. इसमें वेब कर्मचारियों को भी शामिल किया गया है. इस डेमो में यह दिखाया गया है कि किसी वेब वर्कर से, मुख्य थ्रेड के JPEG फ़ाइल से इमेज मेटाडेटा पढ़ने का काम कैसे किया जा सकता है. इसमें यह भी दिखाया गया है कि उस मेटाडेटा को मुख्य थ्रेड में वापस कैसे लाया जा सकता है, ताकि उपयोगकर्ता उसे देख सके.
वेब वर्कर को कैसे लॉन्च किया जाता है
किसी वेब वर्कर को Worker क्लास के इंस्टैंशिएट करके रजिस्टर किया जाता है. ऐसा करने पर, यह तय किया जाता है कि वेब वर्कर कोड कहां दिखेगा, ताकि ब्राउज़र लोड हो सके और बाद में उसके लिए एक नया थ्रेड बन सके. मिलने वाले थ्रेड को अक्सर वर्कर थ्रेड कहा जाता है.
const myWebWorker = new Worker('/js/my-web-worker.js');
वर्कर की JavaScript फ़ाइल में—इस मामले में my-web-worker.js—में, फिर आप वह कोड लिख सकते हैं जो उसके बाद एक अलग वर्कर थ्रेड में चलता है.
वेब वर्कर की सीमाएं
मुख्य थ्रेड पर चलने वाले JavaScript के उलट, वेब वर्कर के पास window कॉन्टेक्स्ट का सीधा ऐक्सेस नहीं होता. साथ ही, उसके पास इससे मिलने वाले एपीआई का सीमित ऐक्सेस होता है. वेब पर काम करने वाले लोगों पर ये पाबंदियां लागू होती हैं:
- वेब वर्कर, DOM को सीधे ऐक्सेस नहीं कर सकते.
- वेब वर्कर, मैसेजिंग पाइपलाइन के ज़रिए
windowकॉन्टेक्स्ट के साथ इंटरैक्ट कर सकते हैं. इसका मतलब है कि वेब वर्कर, डीओएम को अप्रत्यक्ष तरीके से ऐक्सेस कर सकता है. - वेब वर्कर का दायरा
windowके बजायselfहै. - वेब वर्कर स्कोप के पास JavaScript प्रिमिटिव और कंस्ट्रक्ट के साथ-साथ
fetchजैसे एपीआई और काफ़ी बड़ी संख्या में अन्य एपीआई का ऐक्सेस होता है.
वेब वर्कर, window से कैसे बात करते हैं
कोई वेब वर्कर, मुख्य थ्रेड के window
कॉन्टेक्स्ट से मैसेजिंग पाइपलाइन के ज़रिए कम्यूनिकेट कर सकता है. इस पाइपलाइन से आप डेटा को मुख्य थ्रेड और वेब वर्कर
तक ले जा सकते हैं. किसी वेब वर्कर से मुख्य थ्रेड में डेटा भेजने के लिए, आपने वेब वर्कर के कॉन्टेक्स्ट (self) पर message इवेंट सेट अप किया है
// my-web-worker.js
self.addEventListener("message", () => {
// Sends a message of "Hellow, window!" from the web worker:
self.postMessage("Hello, window!");
});
इसके बाद, मुख्य थ्रेड पर window कॉन्टेक्स्ट में स्क्रिप्ट में, आपको किसी दूसरे message इवेंट का इस्तेमाल करके, वेब वर्कर से यह मैसेज मिल सकता है:
// scripts.js
// Creates the web worker:
const myWebWorker = new Worker('/js/my-web-worker.js');
// Adds an event listener on the web worker instance that listens for messages:
myWebWorker.addEventListener("message", ({ data }) => {
// Echoes "Hello, window!" to the console from the worker.
console.log(data);
});
वेब वर्कर की मैसेजिंग पाइपलाइन, वेब वर्कर के संदर्भ से बचने का एक समाधान है. इसका इस्तेमाल करके, उस वेब वर्कर से window को डेटा भेजा जा सकता है
जिसका इस्तेमाल DOM को अपडेट करने के लिए किया जा सकता है या दूसरा काम किया जा सकता है
जिसे मुख्य थ्रेड पर किया जाना चाहिए.
देखें कि आपको कितना ज्ञान है
वेब वर्कर किस थ्रेड पर चलता है?
वेब वर्कर किसे ऐक्सेस कर सकता है?
window कॉन्टेक्स्ट में उपलब्ध एपीआई का एक सख्त सबसेट, जिसमें fetch भी शामिल है.
window कॉन्टेक्स्ट, लेकिन सिर्फ़ सीधे तौर पर नहीं.कोई वेब वर्कर, `विंडो` कॉन्टेक्स्ट को कैसे ऐक्सेस कर सकता है?
window ऑब्जेक्ट के सदस्यों का रेफ़रंस देकर.
window को ऐक्सेस नहीं कर सकता.
self) में postMessage तरीके से दी गई मैसेज पाइपलाइन के ज़रिए.
अगला लेख: कंक्रीट वेब वर्कर के इस्तेमाल का उदाहरण
अगले मॉड्यूल में, कंक्रीट वेब वर्कर के इस्तेमाल का उदाहरण ज़्यादा जानकारी के साथ दिखाया गया है. उस मॉड्यूल में, वेब वर्कर का इस्तेमाल किसी दिए गए यूआरएल से JPEG फ़ाइल फ़ेच करने और किसी वेब वर्कर में उसका Exif मेटाडेटा पढ़ने के लिए किया जाता है. इसके बाद, उस डेटा को वापस मुख्य थ्रेड में भेजा जाता है, जो उपयोगकर्ता को दिखाया जाता है.