HTML5 - वेब वर्कर

जावास्क्रिप्ट को एक एकल-थ्रेडेड वातावरण में चलाने के लिए डिज़ाइन किया गया था, जिसका अर्थ है कि एक ही समय में कई स्क्रिप्ट नहीं चल सकते हैं। ऐसी स्थिति पर विचार करें जहां आपको UI ईवेंट्स को संभालने, एपीआई डेटा की बड़ी मात्रा को संसाधित करने और डोम में हेरफेर करने की आवश्यकता होती है।

जावास्क्रिप्ट आपके ब्राउज़र को उस स्थिति में लटका देगा जहां सीपीयू का उपयोग अधिक है। आइए एक सरल उदाहरण लेते हैं जहां जावास्क्रिप्ट एक बड़े लूप से गुजरता है -

<!DOCTYPE HTML>

<html>
   <head>
      <title>Big for loop</title>
      
      <script>
         function bigLoop() {
            
            for (var i = 0; i <= 10000; i += 1) {
               var j = i;
            }
            alert("Completed " + j + "iterations" );
         }
         
         function sayHello(){
            alert("Hello sir...." );
         }
      </script>
      
   </head>
   
   <body>
      <input type = "button" onclick = "bigLoop();" value = "Big Loop" />
      <input type = "button" onclick = "sayHello();" value = "Say Hello" />
   </body>
</html>

यह निम्नलिखित परिणाम का उत्पादन करेगा -

जब आप बिग लूप बटन पर क्लिक करते हैं तो यह फ़ायरफ़ॉक्स में निम्न परिणाम दिखाता है -

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

ऊपर वर्णित स्थिति का उपयोग करके नियंत्रित किया जा सकता है Web Workers उपयोगकर्ता इंटरफ़ेस को बाधित किए बिना सभी कम्प्यूटेशनल रूप से महंगे कार्यों को कौन करेगा और आम तौर पर अलग थ्रेड पर चलता है।

वेब वर्कर्स लंबे समय तक चलने वाली स्क्रिप्ट्स की अनुमति देते हैं जो उन स्क्रिप्ट्स से बाधित नहीं होती हैं जो क्लिक्स या अन्य उपयोगकर्ता इंटरैक्शन का जवाब देती हैं, और पेज को उत्तरदायी बनाए रखने के लिए लंबे समय तक कार्य को बिना पैदावार के निष्पादित करने की अनुमति देती हैं।

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

जब कोई स्क्रिप्ट किसी वेब वर्कर के अंदर निष्पादित हो रही होती है, तो वह वेब पेज की विंडो ऑब्जेक्ट (window.document) तक नहीं पहुंच सकता है, जिसका अर्थ है कि वेब वर्कर्स का वेब पेज और DOM API तक सीधी पहुंच नहीं है। हालांकि वेब वर्कर्स ब्राउज़र UI को ब्लॉक नहीं कर सकते हैं, फिर भी वे सीपीयू साइकिल का उपभोग कर सकते हैं और सिस्टम को कम उत्तरदायी बना सकते हैं।

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

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

var worker = new Worker('bigLoop.js');

यदि निर्दिष्ट जावास्क्रिप्ट फ़ाइल मौजूद है, तो ब्राउज़र एक नया वर्कर थ्रेड स्पॉन करेगा, जिसे एसिंक्रोनस रूप से डाउनलोड किया गया है। यदि आपके कार्यकर्ता का पथ 404 त्रुटि देता है, तो कार्यकर्ता चुपचाप विफल हो जाएगा।

यदि आपके एप्लिकेशन में जावास्क्रिप्ट फ़ाइलों का समर्थन करने वाले कई हैं, तो आप उन्हें आयात कर सकते हैं importScripts() विधि जो फ़ाइल नाम को तर्कों के रूप में अल्पविराम द्वारा अलग करती है -

importScripts("helper.js", "anotherHelper.js");

एक बार वेब वर्कर के आने के बाद, वेब वर्कर और उसके मूल पृष्ठ के बीच संचार का उपयोग किया जाता है postMessage()तरीका। आपके ब्राउज़र / संस्करण के आधार पर, पोस्टमैसेज () या तो एक स्ट्रिंग या JSON ऑब्जेक्ट को अपने एकल तर्क के रूप में स्वीकार कर सकता है।

वेब वर्कर द्वारा पारित संदेश का उपयोग करके पहुँचा जाता है onmessageमुख्य पृष्ठ में घटना। अब वेब वर्कर का उपयोग करते हुए अपना बिग-लूप उदाहरण लिखते हैं। नीचे मुख्य पृष्ठ (hello.htm) है जो लूप को निष्पादित करने और चर के अंतिम मूल्य को वापस करने के लिए एक वेब कार्यकर्ता को स्पॉन करेगा।j -

<!DOCTYPE HTML>

<html>
   <head>
      <title>Big for loop</title>
      
      <script>
         var worker = new Worker('bigLoop.js');
         
         worker.onmessage = function (event) {
            alert("Completed " + event.data + "iterations" );
         };
         
         function sayHello() {
            alert("Hello sir...." );
         }
      </script>
   </head>
   
   <body>
      <input type = "button" onclick = "sayHello();" value = "Say Hello"/>
   </body>
</html>

निम्नलिखित bigLoop.js फ़ाइल की सामग्री है। यह का उपयोग करता हैpostMessage() एपीआई वापस मुख्य पृष्ठ पर संचार पास करने के लिए -

for (var i = 0; i <= 1000000000; i += 1) {
   var j = i;
}
postMessage(j);

यह निम्नलिखित परिणाम का उत्पादन करेगा -

वेब वर्कर्स को रोकना

वेब वर्कर्स अपने आप को रोक नहीं पाते हैं लेकिन जिस पेज ने उन्हें शुरू किया है उसे कॉल करके रोक सकते हैं terminate() तरीका।

worker.terminate();

एक समाप्त वेब वर्कर अब संदेशों का जवाब नहीं देगा या कोई अतिरिक्त गणना नहीं करेगा। आप एक कार्यकर्ता को पुनरारंभ नहीं कर सकते; इसके बजाय, आप उसी URL का उपयोग करके एक नया कार्यकर्ता बना सकते हैं।

त्रुटियों को संभालना

निम्न वेब वर्कर जावास्क्रिप्ट फ़ाइल में एरर हैंडलिंग फंक्शन का एक उदाहरण दिखाता है जो कंसोल में त्रुटियों को लॉग करता है। त्रुटि हैंडलिंग कोड के साथ, उपरोक्त उदाहरण निम्नानुसार होगा -

<!DOCTYPE HTML>

<html>
   <head>
      <title>Big for loop</title>
      
      <script>
         var worker = new Worker('bigLoop.js');
         
         worker.onmessage = function (event) {
            alert("Completed " + event.data + "iterations" );
         };
         
         worker.onerror = function (event) {
            console.log(event.message, event);
         };
         
         function sayHello() {
            alert("Hello sir...." );
         }
      </script>
   </head>
   
   <body>
      <input type = "button" onclick = "sayHello();" value = "Say Hello"/>
   </body>
</html>

ब्राउज़र समर्थन के लिए जाँच की जा रही है

ब्राउज़र में उपलब्ध वेब वर्कर फ़ीचर सपोर्ट का पता लगाने के लिए सिंटैक्स निम्नलिखित है -

<!DOCTYPE HTML>

<html>
   <head>
      <title>Big for loop</title>
      <script src = "/js/modernizr-1.5.min.js"></script>
      
      <script>
      function myFunction() {
         
         if (Modernizr.webworkers) {
            alert("Congratulation!! you have web workers support." );
         } else {
            alert("Sorry!! you do not have web workers support." );
         }
      }
      </script>
   </head>
   
   <body>
      <button onclick = "myFunction()">Click me</button>
   </body>
</html>

यह निम्नलिखित परिणाम का उत्पादन करेगा -