Web Workers
Web Workers provide a simple means for web content to run scripts in background threads. The worker thread can perform tasks without interfering with the user interface.
1. The Problem: Single-Threaded JavaScript
JavaScript runs on a single thread (the main thread). If you execute a computationally expensive task (like processing a huge image or sorting a massive array) on the main thread, the UI freezes. The user cannot click buttons, scroll, or interact with the page until the task finishes.
2. The Solution: Background Threads
Web Workers allow you to offload these heavy tasks to a separate thread.
- Main Thread: Handles UI, DOM manipulation, and user events.
- Worker Thread: Handles heavy calculations, data processing, etc.
3. Creating a Worker
A worker is created by passing a script file to the Worker constructor.
main.js
if (window.Worker) {
const myWorker = new Worker("worker.js");
// Send data to the worker
myWorker.postMessage([10, 20]);
console.log('Message posted to worker');
// Receive data from the worker
myWorker.onmessage = function(e) {
console.log('Message received from worker', e.data);
};
}worker.js
onmessage = function(e) {
console.log('Worker: Message received from main script');
const result = e.data[0] * e.data[1];
if (isNaN(result)) {
postMessage('Please write two numbers');
} else {
const workerResult = 'Result: ' + result;
console.log('Worker: Posting message back to main script');
postMessage(workerResult);
}
}4. Communication
Communication between the main thread and the worker happens via message passing.
postMessage(data): Sends data.onmessage: Event handler for receiving data.
Note: Data passed between the main thread and workers is copied, not shared. Objects are serialized (using the structured clone algorithm) and deserialized on the other end.
5. Limitations
Workers run in a different global context than the current window.
- No DOM Access: Workers cannot access
document,window, orparent. You cannot manipulate the UI directly from a worker. - Limited Scope: They can access
navigator,location(read-only),XMLHttpRequest,fetch,setTimeout, andsetInterval.
6. Terminating a Worker
If a worker is no longer needed, you can terminate it to free up resources.
myWorker.terminate();programming/javascript/vanilla/javascript programming/javascript/vanilla/event-loop programming/javascript/vanilla/shared-array-buffer-and-atomics