वेब वर्कर के बारे में खास जानकारी

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

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

JavaScript का इस्तेमाल अक्सर सिंगल-थ्रेड वाली भाषा के तौर पर किया जाता है. व्यावहारिक तौर पर, यह यह मुख्य थ्रेड के बारे में बताता है. यह ऐसा थ्रेड होता है जिसमें ब्राउज़र, काम है जिसे आप ब्राउज़र में देखते हैं. इस काम में शामिल टास्क शामिल हैं स्क्रिप्टिंग, कुछ तरह के रेंडरिंग काम, एचटीएमएल और सीएसएस पार्सिंग, और उपयोगकर्ता के लिए काम करने के अन्य तरीकों के बारे में बताया है, जो उपयोगकर्ता अनुभव को बेहतर बनाने में मदद करते हैं. सच में, ब्राउज़र अन्य थ्रेड का इस्तेमाल करते हैं और काम करते हैं. यह काम आप डेवलपर करते हैं, नहीं आम तौर पर, जैसे कि GPU थ्रेड का सीधा ऐक्सेस होता है.

जहां JavaScript का संबंध है, वहां आम तौर पर आपको इन पर काम करने तक ही सीमित कर दिया जाता है मुख्य थ्रेड पर. हालांकि, सिर्फ़ डिफ़ॉल्ट तौर पर. रजिस्टर और इस्तेमाल किया जा सकता है अतिरिक्त थ्रेड हैं. वह सुविधा जिसकी मदद से एक से ज़्यादा थ्रेड की सुविधा इस्तेमाल की जा सकती है JavaScript को Web Workers API के नाम से जाना जाता है.

वेब कर्मचारी तब उपयोगी होते हैं, जब आपके पास कंप्यूटर पर मुख्य थ्रेड पर नहीं चलाया जा सकता. ऐसा करने पर, पेज में ज़्यादा टास्क नहीं होने चाहिए प्रतिक्रिया नहीं देने वाला. इस तरह के काम आपकी वेबसाइट के Next Paint (INP), ताकि यह जानने में मदद मिल सके कि आपके पास किस तरह का काम है पूरी तरह से मुख्य थ्रेड से हटा दिया गया है. ऐसा करने से अपने लिए ज़्यादा जगह बनाने में मदद मिल सकती है ताकि उपयोगकर्ता के इंटरैक्शन ज़्यादा तेज़ी से हो सकें.

इस मॉड्यूल और अगला डेमो में दिखाया गया है कि एक कंक्रीट के इस्तेमाल का उदाहरण, वेब पर कवर किया जाता है कर्मचारी. डेमो में यह दिखाया जाता है कि काम करने के लिए वेब वर्कर का इस्तेमाल कैसे किया जा सकता है मुख्य थ्रेड के बाहर एक JPEG फ़ाइल से चित्र मेटाडेटा को पढ़ता है—और कैसे की मदद से उस मेटाडेटा को मुख्य थ्रेड पर वापस लाया जा सकता है, ताकि उपयोगकर्ता इसे देख सकें.

वेब वर्कर कैसे लॉन्च किया जाता है

Worker क्लास को इंस्टैंशिएट करके, वेब वर्कर को रजिस्टर किया जाता है. जब आप ऐसा करते हैं इसलिए, आप यह तय करते हैं कि वेब वर्कर कोड कहां पर है, जिसे ब्राउज़र और उसके लिए एक नया थ्रेड बनाता है. इससे बनने वाली थ्रेड को अक्सर कॉल किया जाता है कर्मचारियों के लिए थ्रेड.

const myWebWorker = new Worker('/js/my-web-worker.js');

कर्मचारी की JavaScript फ़ाइल में—इस मामले में my-web-worker.js—इसके बाद एक ऐसा कोड लिखें जो एक अलग वर्कर थ्रेड में चलता है.

वेब वर्कर की सीमाएं

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

• वेब वर्कर, सीधे DOM को ऐक्सेस नहीं कर सकते.
• वेब वर्कर किसी मैसेज सेवा के ज़रिए window संदर्भ से बातचीत कर सकते हैं पाइपलाइन का इस्तेमाल करता है, जिसका मतलब है कि वेब वर्कर किसी तरीके से DOM को किसी दूसरे तरीके से ऐक्सेस कर सकता है.
• वेब वर्कर का दायरा window के बजाय self है.
• वेब वर्कर के दायरे में को की JavaScript प्रिमिटिव की ऐक्सेस होती है और के साथ-साथ fetch और काफ़ी बड़ी संख्या में अन्य एपीआई.

वेब कर्मचारी window से कैसे बात करते हैं

वेब वर्कर, मुख्य थ्रेड के window से संपर्क कर सकता है कॉन्टेक्स्ट के बारे में बात करते हैं. यह पाइपलाइन आपको डेटा को मुख्य थ्रेड और वेब वर्कर से कनेक्ट होता है. किसी वेब वर्कर से मुख्य थ्रेड, आपने वेब वर्कर के संदर्भ पर message इवेंट सेट अप किया है (self)

// 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 को डेटा भेज सकते हैं जिसका इस्तेमाल करके, डीओएम को अपडेट किया जा सकता है या ऐसा अन्य काम किया जा सकता है जिस पर मुख्य थ्रेड.

अपने ज्ञान को परखें

अगला लेख: वेब वर्कर के इस्तेमाल का गंभीर मामला

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