HTML वेब वर्कर्स
In this page:
const worker = new Worker("worker.js");
worker.postMessage(data);
worker.onmessage = (event) => { /* event.data */ };Multi-Threaded ब्राउज़िंग को समझना
वेब ब्राउज़र आमतौर पर सभी स्क्रिप्ट्स को एक ही main thread पर चलाते हैं, जो पेज रेंडरिंग और यूज़र इंटरैक्शन्स को भी हैंडल करता है। अगर कोई स्क्रिप्ट कोई भारी, कॉम्प्लेक्स टास्क चलाती है, तो main thread फ्रीज़ हो जाता है, जिससे पेज अनरिस्पॉन्सिव हो जाता है।
उदाहरण: Understanding Multi-Threaded Browsing
<script>
// Without a worker, a heavy loop here would freeze the page
const worker = new Worker('worker.js');
</script>एक Web Worker बनाना
Web Worker बनाने के लिए, आप अपनी main स्क्रिप्ट के अंदर एक नया Worker ऑब्जेक्ट इनिशियलाइज़ करते हैं, जो एक अलग JavaScript फाइल की ओर पॉइंट करता है जिसमें वह कोड होता है जिसे आप बैकग्राउंड में चलाना चाहते हैं।
उदाहरण: Creating a Web Worker
<script>
const worker = new Worker('worker.js');
</script>मैसेज एक्सचेंज करना (postMessage)
चूंकि Web Workers एक अलग थ्रेड पर चलते हैं, इसलिए वे सीधे आपके पेज एलिमेंट्स को मॉडिफाई नहीं कर सकते। इसके बजाय, वे postMessage मेथड का उपयोग करके और onmessage इवेंट से सुनकर आपकी main स्क्रिप्ट के साथ आगे-पीछे मैसेज भेजकर कम्युनिकेट करते हैं।
उदाहरण: Exchanging Messages (postMessage)
<script>
const worker = new Worker('worker.js');
worker.postMessage('start');
worker.onmessage = function (event) {
console.log('Result:', event.data);
};
</script>Worker थ्रेड्स को समाप्त करना
चलते समय Web Workers सिस्टम मेमोरी और CPU संसाधन खपत करते हैं। अपने ऐप को अच्छी तरह परफॉर्म करते रहने के लिए, आपको हमेशा अपनी main स्क्रिप्ट से terminate मेथड का उपयोग करके, या worker के अंदर से close करके, काम पूरा होते ही workers को समाप्त कर देना चाहिए।
उदाहरण: Terminating Worker Threads
<script>
const worker = new Worker('worker.js');
worker.terminate();
</script>Web Worker की सीमाएँ
चूंकि Web Workers एक अलग बैकग्राउंड थ्रेड पर चलते हैं, उनकी कुछ सख्त सीमाएँ हैं: वे DOM, window ऑब्जेक्ट, या लोकल पेज एलिमेंट्स को एक्सेस नहीं कर सकते, और उन्हें बाहरी स्क्रिप्ट्स importScripts मेथड का उपयोग करके लोड करनी होती हैं।
उदाहरण: Web Worker Constraints
<script>
const worker = new Worker('worker.js');
worker.postMessage('data');
// worker.js cannot access document or window directly
</script>- अपने background worker files से सीधे webpage elements modify करने या DOM access करने की कोशिश करना।
- background workers को terminate करना भूल जाना, जो system memory बर्बाद करता है और devices को धीमा करता है।
- workers initialize करते समय गलत file paths इस्तेमाल करना, जिससे loading errors होती हैं।
- Web Workers आपके main webpage को smooth और responsive रखने के लिए separate threads पर background scripts चलाते हैं।
- Web Workers postMessage method इस्तेमाल करके आपके main scripts के साथ messages भेजकर communicate करते हैं।
- Workers सीधे webpage elements access नहीं कर सकते, और device memory खाली करने के लिए अपना task खत्म होते ही उन्हें terminate कर देना चाहिए।
standard HTML5 Web Workers सभी modern web browsers द्वारा natively supported हैं।
Chapter Quiz — Complete all 11 topics to unlock
0/11 topics done
Complete these topics first: