लोड हो रहा है...

HTML Web Workers

पहले Drag and Drop पॉइंटर इवेंट से DOM पेलोड हिलाता/लेबल करता था। यह पाठ पॉइंटर जेस्चर छोड़कर Web Workers पेश करता है: बैकग्राउंड थ्रेड में JS ताकि लंबा लूप UI न जमे। दायरा व्यावहारिक — बनाएँ, संदेश, worker में DOM नहीं — SharedWorker बेड़े नहीं।

HTML कोर्स में web workers क्यों

मुख्य थ्रेड पर व्यस्त लूप से शुरुआती फ्रीज़ पेज देखते हैं। Worker बैकग्राउंड गणना का पहला आम API है। DnD के बाद विभाजन अलग है: पेज स्क्रिप्ट DOM/UI की मालिक; worker भारी गणना की और केवल संदेश से बात करता है।

सीधा उत्तर

1) new Worker("worker.js") या Blob। 2) पेज से postMessage। 3) worker में onmessage, गणना, postMessage वापस। 4) DOM केवल पेज पर अपडेट करें। 5) सीधी DOM पहुँच नहीं। 6) http(s) या Blob चुनें।

📊 main thread vs worker

Topic	Main page script	Dedicated worker
Typical role	UI, DOM, create Worker	Heavy compute off UI thread
Talks via	postMessage / onmessage	postMessage / onmessage
Can touch DOM?	Yes	No — return data instead
Beginner entry	new Worker(url or Blob)	onmessage + compute + postMessage
This course depth	Required	Required (simple round-trip)
Not this lesson	Drag-and-drop gestures	SharedWorker / Service Worker products

छोटा Blob Worker राउंड-ट्रिप

एक HTML बिना अलग worker.js Blob से worker बनाता है। पेज संख्या भेजता है; worker योग लूप लौटाता है।

Blob Worker compute round-trip

html

<button id="go" type="button">Run in worker</button>
<pre id="out"></pre>
<script>
const out = document.getElementById("out");
const src =
"onmessage=function(e){" +
"var n=e.data,s=0,i;" +
"for(i=1;i<=n;i++){s+=i;}" +
"postMessage(s);" +
"};";
const blob = new Blob([src], { type: "application/javascript" });
const w = new Worker(URL.createObjectURL(blob));
w.onmessage = function (e) {
out.textContent = "Sum 1..40 = " + e.data;
};
document.getElementById("go").onclick = function () {
out.textContent = "Working…";
w.postMessage(40);
};
</script>

राउंड-ट्रिप कॉल पढ़ना

Blob + createObjectURL बिना दूसरी फ़ाइल
new Worker बैकग्राउंड स्क्रिप्ट शुरू करता है
postMessage संख्या भेजता है
worker गणना कर जवाब देता है
पेज pre में लिखता है — DOM मुख्य थ्रेड पर
DnD से अलग: कोई draggable नहीं
डेमो छोटा रखें

UI मुख्य थ्रेड पर रहती है

Worker डेटा लौटाता है; पेज स्क्रिप्ट तय करती है यूज़र क्या देखे। यह डेमो स्ट्रिंग माँगता है; पेज onmessage पैराग्राफ अपडेट करता है।

Worker replies; page updates DOM

html

<button id="ask" type="button">Ask worker</button>
<p id="msg">Waiting…</p>
<script>
const msg = document.getElementById("msg");
const src =
"onmessage=function(e){" +
"postMessage('Worker got: ' + e.data);" +
"};";
const w = new Worker(
URL.createObjectURL(new Blob([src], { type: "application/javascript" }))
);
w.onmessage = function (e) {
msg.textContent = e.data;
};
document.getElementById("ask").onclick = function () {
w.postMessage("hello");
};
</script>

UI स्वामित्व विचार पढ़ना

Worker केवल स्ट्रिंग echo — बिना document
पेज textContent सेट करता है
वही संदेश पुल
DnD नहीं
Service Worker कोर्स नहीं
जब काम UI फ्रीज़ का जोखिम हो worker उपयोग करें
अगला: SSE

Worker कब उपयोग करें

लंबा CPU लूप: अच्छा intro
छोटा स्ट्रिंग बदलाव: अक्सर मुख्य थ्रेड
कार्ड ज़ोन में: DnD था
GPS: Geolocation था
SharedWorker/Service Worker उत्पाद: इस परिचय से परे
worker से बटन अपडेट: अनुमति नहीं

अभ्यास — बनाएँ, संदेश दें, पेंट करें

योग डेमो आज़माएँ।
40 बदलें।
echo डेमो आज़माएँ।
वैकल्पिक: http(s) पर worker.js।
वाक्य: DnD पॉइंटर से; Worker संदेश से ऑफ-थ्रेड।
http(s)/Blob चुनें।
आगे: SSE।

आसान गलतियाँ

worker में querySelector की उम्मीद
छोटी टास्क के लिए worker
DnD से मिलाना
नाज़ुक file:// पथ
पेज पर onmessage भूलना
Blob को एकमात्र प्रोड पैटर्न मानना
परिचय को पूरा SharedWorker कोर्स मानना

सारांश

Worker UI थ्रेड से बाहर JS चलाते हैं
postMessage/onmessage; DOM केवल पेज पर
क्लासिक worker में document/window नहीं
डेमो के लिए Blob; worker.js के लिए http(s)
DnD पॉइंटर मूव/लेबल था; यह पाठ बैकग्राउंड गणना + संदेश
अगला: SSE

🧠 अपने ज्ञान की परीक्षा करें

शुरू करने के लिए तैयार

अपने ज्ञान की परीक्षा करें

इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं

❓

प्रश्न

🎯

70%

पास करने के लिए

♾️

∞

समय

🔄

∞

प्रयास

📝 निर्देश

हर प्रश्न को ध्यान से पढ़ें
हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
आपकी प्रगति शीर्ष पर दिखाई जाएगी