Day 51 Web Workers
Web Workers JavaScript ko background thread mein chalane dete hain. Heavy computation (image processing, large calculations) main thread ko block na kare — UI smooth rehti hai.
Creating a Web Worker
Worker banao aur communicate karo.
// worker.js — alag file mein
self.addEventListener("message", (event) => {
const { data } = event;
// Heavy computation
let result = 0;
for (let i = 0; i < data.iterations; i++) {
result += Math.sqrt(i);
}
self.postMessage({ result, done: true });
});
// ─────────────────────────
// main.js
const worker = new Worker("worker.js");
worker.postMessage({ iterations: 10000000 });
worker.addEventListener("message", (e) => {
console.log("Result:", e.data.result);
worker.terminate(); // cleanup
});
// UI is NOT blocked while worker runs!
console.log("UI is still responsive...");
🎯 Practice Challenge
Image filter (grayscale) Web Worker mein chalao. Main thread mein loading spinner dikhao jab tak worker kaam kare.