क्या आपको कभी उस ब्राउज़र में कोड चलाने की आवश्यकता पड़ी है, जो आपके एप्लिकेशन को चलाने में इतना समय लेता है कि कुछ समय के लिए अनुत्तरदायी हो गया? HTML5 वेब वर्कर्स के साथ, आपको इसे फिर कभी अनुभव करने की आवश्यकता नहीं है।

वेब कर्मचारी आपको लंबे समय से चल रहे कोड को अलग करने और पृष्ठ पर चल रहे अन्य कोड से स्वतंत्र रूप से चलाने की अनुमति देते हैं। यह जटिल संचालन के दौरान भी आपके UI को उत्तरदायी बनाए रखता है।

वेब वर्कर्स क्या हैं?

परंपरागत रूप से, जावास्क्रिप्ट एक सिंगल-थ्रेडेड भाषा है। इसका मतलब है कि कोड का एक टुकड़ा चल रहा है, जबकि कुछ भी नहीं चल सकता है। उदाहरण के लिए, यदि आपके पास एक DOM तत्व को चेतन करने का प्रयास करने वाला कोड है, तो एक चर को बदलने का प्रयास करने वाले कोड को एनीमेशन के चलने से पहले समाप्त होने की प्रतीक्षा करनी होगी।

वेब वर्कर जावास्क्रिप्ट फाइलें हैं जो एक अलग थ्रेड में निष्पादित होती हैं और डीओएम तक सीधी पहुंच नहीं होती है।

वेब कर्मचारियों के बारे में सोचने का एक तरीका यह है कि वे कोड के टुकड़े हैं जिन्हें चलने में बहुत समय लगता है, इसलिए आप उन्हें पृष्ठभूमि में निष्पादित करने के लिए ब्राउज़र को देते हैं। चूंकि वह कोड अब बैकग्राउंड में चल रहा है, इसलिए यह आपके वेब पेज के लिए जिम्मेदार जावास्क्रिप्ट को प्रभावित नहीं करता है।

instagram viewer

एक साइड इफेक्ट के रूप में, यह अब आपके बाकी कोड के साथ सीधे इंटरैक्ट नहीं कर सकता है, इसलिए वेब वर्कर्स के पास DOM तक पहुंच नहीं है। हालाँकि, कई अन्य ब्राउज़र API अभी भी उपलब्ध हैं, जिनमें WebSocket और Fetch API शामिल हैं।

हालाँकि, वेब कार्यकर्ता मुख्य धागे से पूरी तरह से अलग नहीं हैं। जब एक कार्यकर्ता को मुख्य धागे के साथ संवाद करने की आवश्यकता होती है, तो यह एक संदेश भेज सकता है और मुख्य धागा प्रतिक्रिया में अपना संदेश भेज सकता है।

वेब वर्कर्स क्यों?

वेब कर्मचारियों से पहले, जावास्क्रिप्ट को चलाने का एकमात्र तरीका जिसके लिए ब्राउज़र में बहुत अधिक समय की आवश्यकता होती है, वह या तो था:

  • स्वीकार करें कि पृष्ठ कुछ समय के लिए अनुत्तरदायी होगा।
  • उस कोड को तोड़ें अतुल्यकालिक खंड.

चूंकि एक अनुत्तरदायी पृष्ठ आमतौर पर एक खराब उपयोगकर्ता अनुभव होता है, इसलिए आप एसिंक्रोनस विकल्प का विकल्प चुन सकते हैं। इस तरह से कोड लिखने का मतलब है कि इसे छोटे टुकड़ों में विभाजित करना ब्राउज़र चला सकता है, जबकि यह यूजर इंटरफेस को संभाल नहीं रहा है। टुकड़ों को इतना छोटा होना चाहिए कि यदि UI को अद्यतन करने की आवश्यकता है, तो ब्राउज़र वर्तमान टुकड़े को निष्पादित कर सकता है और उपयोगकर्ता इंटरफ़ेस में भाग ले सकता है।

इस समस्या के बेहतर समाधान की पेशकश करने के लिए वेब वर्कर्स को HTML5 में जोड़ा गया था। आपको एसिंक्रोनस कोड के साथ रचनात्मक होने के लिए मजबूर करने के बजाय, वे आपको एक फ़ंक्शन को अपने अलग थ्रेड में चलाने के लिए स्पष्ट रूप से अलग करने देते हैं।

इससे डेवलपर्स के लिए ऐसा कोड लिखना आसान हो गया और उपयोगकर्ता के अनुभव में भी सुधार हुआ।

वेब वर्कर्स के लिए मामलों का उपयोग करें

कोई भी एप्लिकेशन जिसके लिए क्लाइंट साइड पर बहुत अधिक गणना की आवश्यकता होती है, वेब वर्कर्स से लाभान्वित हो सकता है।

मान लीजिए, उदाहरण के लिए, आपका एप्लिकेशन एक उपयोग रिपोर्ट जेनरेट करना चाहता है, और यह क्लाइंट के सभी डेटा को गोपनीयता चिंताओं से बाहर संग्रहीत करता है।

उस रिपोर्ट को जनरेट करने के लिए, आपके वेब एप्लिकेशन को डेटा पुनर्प्राप्त करना होगा, उस पर गणनाएँ चलानी होंगी, परिणामों को व्यवस्थित करना होगा और उन्हें उपयोगकर्ता के सामने प्रस्तुत करना होगा।

यदि आपने इसे मुख्य थ्रेड में करने का प्रयास किया है, तो एप्लिकेशन डेटा संसाधित करते समय उपयोगकर्ता एप्लिकेशन का उपयोग करने में पूरी तरह से असमर्थ होगा। इसके बजाय, आप उस कोड के कुछ या सभी को वेब वर्कर में स्थानांतरित कर सकते हैं। यह उपयोगकर्ता को गणना के दौरान एप्लिकेशन का उपयोग जारी रखने की अनुमति देता है।

जावास्क्रिप्ट में वेब वर्कर्स का उपयोग कैसे करें

वेब वर्कर एपीआई परिभाषित करता है कि वेब श्रमिकों का उपयोग कैसे करें। इस एपीआई का उपयोग इस तरह से वर्कर कंस्ट्रक्टर के साथ वर्कर ऑब्जेक्ट बनाना शामिल है:

चलो न्यूवर्कर = वर्कर ('कार्यकर्ता.जेएस');

मज़दूर कंस्ट्रक्टर एक जावास्क्रिप्ट फ़ाइल के नाम को उसके पैरामीटर के रूप में स्वीकार करता है और फ़ाइल को एक नए थ्रेड में चलाता है। यह मुख्य थ्रेड को वर्कर थ्रेड के साथ इंटरैक्ट करने की अनुमति देने के लिए वर्कर ऑब्जेक्ट देता है।

कार्यकर्ता आगे और पीछे संदेश भेजकर मुख्य धागे से बातचीत करते हैं। आप उपयोग करते हैं संदेश भेजें कार्यकर्ता और मुख्य धागे के बीच घटनाओं को भेजने के लिए कार्य करता है। उपयोग ऑनमैसेज घटना श्रोता दूसरे पक्ष के संदेशों को सुनने के लिए।

यहाँ एक कोड उदाहरण है। सबसे पहले, एक मुख्य धागा इस तरह दिख सकता है:

होने देना कार्यकर्ता = नया कार्यकर्ता ('कार्यकर्ता.जेएस')
कार्यकर्ता.पोस्टमैसेज('अरे!')
कार्यकर्ता संदेश = समारोह(इ) {
 कंसोल.लॉग('कार्यकर्ता सूत्र कहते हैं', ई.डेटा)
}

यह मुख्य धागा कार्यकर्ता.जेएस से एक कार्यकर्ता वस्तु बनाता है, फिर इसके साथ एक संदेश भेजता है कार्यकर्ता.पोस्टसंदेश. यह तब एक घटना श्रोता को परिभाषित करता है, जो अवधारणा के समान है a डोम घटना श्रोता. हर बार जब कार्यकर्ता मुख्य थ्रेड पर संदेश भेजता है, और हैंडलर कार्यकर्ता के संदेश को कंसोल पर लॉग करता है, तो एक ईवेंट सक्रिय हो जाएगा।

कार्यकर्ता के अंदर कोड (worker.js) में एक काम है:

संदेश = समारोह(इ) {
होने देना संदेश = ई.डेटा;
 कंसोल.लॉग('मुख्य सूत्र ने कहा', संदेश);
 संदेश भेजें('नमस्ते!')
}

यह मुख्य थ्रेड से भेजे गए किसी भी संदेश को सुनता है, संदेश को कंसोल पर लॉग करता है, और एक वापसी संदेश को मुख्य थ्रेड पर वापस भेजता है।

इस उदाहरण के सभी संदेश स्ट्रिंग हैं, लेकिन यह कोई आवश्यकता नहीं है: आप संदेश के रूप में लगभग किसी भी प्रकार का डेटा भेज सकते हैं।

आपने अब तक जिस तरह के कार्यकर्ता देखे हैं, उन्हें समर्पित कार्यकर्ता कहा जाता है। आप उन्हें केवल उस फ़ाइल से एक्सेस कर सकते हैं जिसमें आपने उन्हें बनाया है (वे इसके लिए समर्पित हैं)। साझा कार्यकर्ता इसके विपरीत हैं: वे कई फाइलों से संदेश प्राप्त कर सकते हैं और उन्हें संदेश भेज सकते हैं। साझा कार्यकर्ता वैचारिक रूप से समर्पित श्रमिकों के समान होते हैं, लेकिन आपको उनका उपयोग थोड़ा अलग तरीके से करना होगा।

आइए एक उदाहरण देखें। वर्कर कंस्ट्रक्टर का उपयोग करने के बजाय, प्रत्येक फ़ाइल जो एक साझा कार्यकर्ता का उपयोग करना चाहती है, उसे एक वर्कर ऑब्जेक्ट का उपयोग करना होगा साझा कार्यकर्ता ():

होने देना साझा कार्यकर्ता = नया SharedWorker('worker.js')

हालांकि मतभेद यहीं नहीं रुकते। किसी साझा कार्यकर्ता से संदेश भेजने या प्राप्त करने के लिए फ़ाइल के लिए, इसे एक्सेस करके ऐसा करना होगा a बंदरगाह वस्तु, सीधे ऐसा करने के बजाय। यहाँ जो दिखता है वह है:

ShareWorker.port.postMessage('नमस्ते!')
ShareWorker.port.onMessage = समारोह(इ) {
 कंसोल.लॉग('साझा कार्यकर्ता भेजा गया', ई.डेटा);
}

आपको कार्यकर्ता के अंदर भी पोर्ट ऑब्जेक्ट का उपयोग करना होगा:

ऑनकनेक्ट = समारोह(इ) {
स्थिरांक पोर्ट = ई.पोर्ट्स [0];
port.onmessage = समारोह(इ) {
 कंसोल.लॉग('संदेश प्राप्त हुआ', ई.डेटा)
 पोर्ट.पोस्टमैसेज('नमस्ते!');
 }
}

ऑनकनेक्ट हर बार पोर्ट से कनेक्शन होने पर श्रोता सक्रिय होता है (जब a ऑनमैसेज घटना श्रोता मुख्य धागे में स्थापित है)।

जब ऐसा होता है, तो कोड को वह पोर्ट मिल जाता है जो अभी कनेक्ट इवेंट से जुड़ा था और इसे एक वेरिएबल में स्टोर करता है। अगला, कोड पंजीकृत करता है ऑनमैसेज पोर्ट ऑब्जेक्ट पर श्रोता। कोड तब संदेश को कंसोल में लॉग करता है, और संदेश को मुख्य थ्रेड पर वापस भेजने के लिए पोर्ट का उपयोग करता है।

वेब कार्यकर्ता उपयोगकर्ता अनुभव में सुधार करते हैं

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