HTML Tutorial
HTML Web Workers API
Web Workers let you run JavaScript in background threads separate from the main (UI) thread. Use them to perform CPU-heavy or long-running tasks (data processing, image manipulation, heavy calculations) without freezing the page or janky UI.
1. When to use Web Workers
- CPU-intensive calculations (sorting large arrays, mathematical simulations)
- Parsing or transforming large JSON / CSV files
- Image processing, compression, or generation
- Background data processing while UI remains responsive
Not for: DOM manipulation (workers have no access to DOM) — only message passing.
2. Types of workers
- Dedicated Worker — tied to one script/page (new Worker('worker.js')).
- Shared Worker — can be used by multiple windows/tabs from same origin (new SharedWorker('shared.js')).
- Service Worker — different API for network proxy, offline caching and push — not the same as Web Worker.
3. Basic flow (Dedicated Worker)
- Main script creates a Worker.
- Main and worker communicate via postMessage() and onmessage.
- Worker does work and posts results back.
- Main can terminate() worker when done.
4. Minimal example — main page + worker file
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Web Worker Example</title>
</head>
<body>
<h2>Web Worker Example</h2>
<button id="start">Start Heavy Task</button>
<button id="stop">Stop Worker</button>
<pre id="log"></pre>
<script>
let worker = null;
const log = document.getElementById('log');
document.getElementById('start').addEventListener('click', () => {
if (worker) {
log.textContent += '\\nWorker already running';
return;
}
// Create worker (assumes worker.js in same folder)
worker = new Worker('worker.js');
// Receive messages from worker
worker.onmessage = (e) => {
log.textContent += '\\n' + JSON.stringify(e.data);
};
worker.onerror = (err) => {
log.textContent += '\\nWorker error: ' + err.message;
worker.terminate();
worker = null;
};
// Send initial message to worker
worker.postMessage({ cmd: 'start', countTo: 100000000 });
log.textContent += '\\nWorker started';
});
document.getElementById('stop').addEventListener('click', () => {
if (worker) {
worker.terminate();
worker = null;
log.textContent += '\\nWorker terminated by main';
} else {
log.textContent += '\\nNo worker to stop';
}
});
</script>
</body>
</html>
Web Worker Example
worker.js
// worker.js (runs in background thread)
self.onmessage = function(e) {
const data = e.data;
if (data.cmd === 'start') {
const n = data.countTo || 1000000;
// Example: simple heavy loop with intermittent progress posts
let sum = 0;
const chunk = Math.floor(n / 10) || 1;
for (let i = 1; i <= n; i++) {
sum += i; // compute sum to simulate work
if (i % chunk === 0) {
// send progress back to main thread
self.postMessage({ progress: i / n, partialSum: sum });
}
}
// final message
self.postMessage({ done: true, result: sum });
}
};
// optional: handle errors inside worker
self.onerror = function(err) {
self.postMessage({ error: err.message });
};
Save index.html and worker.js in the same folder and open index.html (served by a local server ideally — some browsers restrict workers via file://).
5. Message passing basics
- Main → Worker: worker.postMessage(data)
- Worker → Main: self.postMessage(data)
- Receive in main: worker.onmessage = e => { ... }
- Receive in worker: self.onmessage = e => { ... }
6. Transferable objects
Use ArrayBuffer transfer to move ownership without clone:
// main thread
const ab = new ArrayBuffer(1024 * 1024); // 1MB
worker.postMessage(ab, [ab]); // transfer ownership
// after this, `ab.byteLength` may be 0 in main
// worker.js receives the ArrayBuffer and uses it
self.onmessage = e => {
const buffer = e.data;
// process buffer...
};
7. Error handling & termination
- worker.onerror in main receives uncaught errors from worker.
- Use worker.terminate() to stop immediately from main.
- Worker can call self.close() to stop itself.
8. Shared Worker
Shared workers allow multiple windows/tabs to talk to the same background script. Use new SharedWorker('shared.js') and port.postMessage() / port.onmessage. Browser support is more limited than dedicated workers.
9. Limitations & security
- No DOM access inside workers. They can use fetch, IndexedDB, postMessage, and some Web APIs.
- Workers follow same-origin policy.
- Service Worker is separate and for offline/network control, not general background compute.
- Avoid spawning too many workers (thread overhead). Use a small pool (worker pool pattern) for many tasks.
10. Best practices
- Keep worker logic isolated in separate files.
- Send minimal messages (avoid over-chatty messaging). Use progress updates sensibly.
- Use Transferable objects for large binary data (images, buffers).
- Use a worker pool for task queuing when many short tasks exist.
- Always handle worker errors and user abort/terminate.
- For heavy DOM-related rendering, consider offloading data processing to worker and update DOM from main thread only.
11. Browser support
Most modern browsers support Web Workers (Dedicated Workers) broadly. Shared Workers and some advanced features have less universal support — test on target browsers.
12. Useful APIs available inside workers
- fetch() — perform network requests
- XMLHttpRequest — also available in many browsers
- IndexedDB — store/lookup data from worker
- importScripts('lib1.js', 'lib2.js') — load additional scripts synchronously inside worker
- self.postMessage() / self.onmessage — communication
13. Example: Using importScripts() inside worker
// worker.js
importScripts('biglib.js'); // synchronous import
// now biglib functions are available in worker scope
14. Worker pool pattern
Create N workers and queue tasks; assign tasks to the next available worker. This avoids creating/terminating workers repeatedly and reduces overhead.
15. Security note
Be cautious when executing untrusted code inside workers. Workers have access to network and storage APIs; ensure you only run code you control or sanitize inputs.