HTML Web Workers
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>Chapter Quiz — Complete all 11 topics to unlock
0/11 topics done
Complete these topics first: