JavaScript Notes

Web Workers in JavaScript — Multithreading & Background Tasks Guide

Learn JavaScript Web Workers to run CPU-intensive code in background threads without blocking the UI. Covers postMessage, Worker lifecycle, SharedWorker, error handling, and interview Q&A.

JavaScript is single-threaded — all your code, event listeners, DOM manipulation, and rendering share one thread. If a heavy calculation blocks that thread, the entire UI freezes. Web Workers solve this by running JavaScript in a separate background thread, keeping the main thread (and the UI) responsive.

💡 Key insight: Web Workers have no access to the DOM, window, or document. They communicate with the main thread exclusively through postMessage and onmessage. Think of them as completely isolated workers who can only pass notes back and forth.

How Web Workers Communicate

Example

Main Thread Worker Thread │ │ │ worker.postMessage(data) │ │ ────────────────────────► │ │ self.onmessage fires │ │ │ (processes data) │ │ │ │ self.postMessage(result) │ │ ◄──────────────────────── │ worker.onmessage fires │

Data is copied (structured clone algorithm) — not shared. (Except Transferable Objects.)

Creating a Basic Worker

Example

// worker.js (the worker file) self.onmessage = function (event) { const { numbers } = event.data; // Simulate CPU-heavy work: sum a large array const result = numbers.reduce((sum, n) => sum + n, 0); self.postMessage({ result }); };

Example

// main.js (your page script) const worker = new Worker("worker.js"); // Send data to worker const bigArray = Array.from({ length: 1_000_000 }, (_, i) => i + 1); worker.postMessage({ numbers: bigArray }); // Receive result worker.onmessage = (event) => { console.log("Sum:", event.data.result); }; worker.onerror = (error) => { console.error("Worker error:", error.message); };

Output

"Sum: 500000500000"
// UI remains fully responsive while the worker computes

Inline Workers with Blob URLs

When you can't serve a separate .js file:

Example

Output

"Sorted: [1, 2, 3, 5, 8, 9]"

Two-Way Communication Pattern

Example

// worker.js self.onmessage = (e) => { const { type, payload } = e.data; switch (type) { case "SORT": self.postMessage({ type: "SORTED", result: payload.sort((a,b) => a - b) }); break; case "FILTER": self.postMessage({ type: "FILTERED", result: payload.filter(n => n % 2 === 0) }); break; default: self.postMessage({ type: "ERROR", result: "Unknown command" }); } };

Example

// main.js const worker = new Worker("worker.js"); worker.onmessage = ({ data }) => { console.log(`${data.type}:`, data.result); }; worker.postMessage({ type: "SORT", payload: [4, 1, 3, 2] }); worker.postMessage({ type: "FILTER", payload: [1, 2, 3, 4, 5, 6] });

Output

"SORTED:   [1, 2, 3, 4]"
"FILTERED: [2, 4, 6]"

Transferable Objects — Zero-Copy Transfer

By default, data is cloned (copied) when passed to a worker. For large buffers, this is slow. Transferable Objects (like ArrayBuffer) transfer ownership in O(1) time — no copy.

Example

// Transfer an ArrayBuffer to worker (original becomes unusable) const buffer = new ArrayBuffer(1024 * 1024 * 50); // 50 MB console.log("Before transfer:", buffer.byteLength); worker.postMessage({ buffer }, [buffer]); // second arg = transfer list console.log("After transfer:", buffer.byteLength); // 0 — detached!

Output

"Before transfer: 52428800"
"After transfer: 0"   // buffer ownership moved to worker

Terminating a Worker

js example

// From the main thread
worker.terminate();
console.log("Worker terminated");

// From inside the worker itself
self.close();

Output

"Worker terminated"

Always terminate workers when they're no longer needed to free memory and CPU.

Error Handling

Example

worker.onerror = (error) => { console.error("Worker error"); console.error("Message:", error.message); console.error("File:", error.filename); console.error("Line:", error.lineno); error.preventDefault(); // prevent error from propagating to window }; // In the worker — catch and post errors back: self.onmessage = (e) => { try { const result = riskyComputation(e.data); self.postMessage({ success: true, result }); } catch (err) { self.postMessage({ success: false, error: err.message }); } };

SharedWorker — Shared Across Tabs

A SharedWorker is shared across all pages from the same origin.

Example

// shared-worker.js const connections = []; self.onconnect = (e) => { const port = e.ports[0]; connections.push(port); port.onmessage = (event) => { // Broadcast to all connected tabs connections.forEach((p) => p.postMessage(event.data)); }; port.start(); };

Example

// main.js (in each tab) const worker = new SharedWorker("shared-worker.js"); worker.port.onmessage = (e) => console.log("Broadcast:", e.data); worker.port.start(); worker.port.postMessage("Hello from tab!");

Output

// All open tabs see:
"Broadcast: Hello from tab!"

What Web Workers Can and Cannot Access

Can Access ✅	Cannot Access ❌
`fetch()`	`window` object
`IndexedDB`	`document`
`WebSockets`	`localStorage`
`setTimeout/setInterval`	DOM elements
`crypto`	`alert/confirm`
`importScripts()`	`window.location` (use `self.location`)
`navigator` (limited)	Canvas 2D (use OffscreenCanvas)

When to Use Web Workers

Large array sorting / filtering — avoid freezing the UI
JSON parsing of massive payloads (e.g., large API responses)
Image/video processing — pixel manipulation, encoding
Cryptography — hashing, encryption
Physics engines — game simulations, collision detection
Data parsing — CSV processing, markdown compilation, syntax highlighting

Common Mistakes

Trying to access the DOM inside a worker — throws ReferenceError. Workers have no DOM.
Not terminating workers — leaving unused workers running wastes memory and CPU.
Posting large objects without Transferables — cloning 50 MB of data is slow. Use Transferable Objects for ArrayBuffer, MessagePort, OffscreenCanvas.
Using workers for tiny tasks — the overhead of spawning a worker and message serialization is not worth it for sub-millisecond operations.
Expecting localStorage to work in a worker — use IndexedDB instead.

Interview Questions

Q1. What problem do Web Workers solve?

JavaScript is single-threaded. Long computations block the main thread, freezing the UI. Web Workers run code in a separate thread, keeping the main thread free for rendering and user interaction.

Q2. How do the main thread and a worker communicate?

Via postMessage(data) and the onmessage event. Data is deep-cloned (structured clone algorithm) when sent, so changes on one side don't affect the other. For large binary data, use Transferable Objects to avoid copying.

Q3. Can a Web Worker access the DOM?

No. Workers have no access to window, document, or any DOM API. This is by design — DOM manipulation must stay on the main thread to avoid race conditions.

Q4. What are Transferable Objects and why are they useful?

Transferable Objects (like ArrayBuffer) transfer *ownership* to the receiving thread in O(1) time — no copy. After transfer, the original becomes unusable (detached). This is crucial for performance when passing large binary data (e.g., image buffers) to a worker.

Q5. What is the difference between a Web Worker and a Service Worker?

A Web Worker is a background computation thread tied to the page lifetime — great for CPU-heavy tasks. A Service Worker is a network proxy that survives page closure — great for caching, offline support, and push notifications. Service Workers have a completely different lifecycle.

Q6. How do you terminate a Web Worker?

From the main thread: worker.terminate(). From inside the worker: self.close(). Always terminate workers when their task is complete.

Q7. When should you NOT use a Web Worker?

When the task is very short (< 1ms), because the overhead of creating a worker and serializing messages exceeds the benefit. Also, don't use workers for DOM manipulation — that's impossible from a worker.

Key Takeaways

Web Workers run in a separate thread — they cannot access the DOM or window, but they keep the UI responsive during heavy computation.
Communication is exclusively through postMessage / onmessage — data is cloned.
Use Transferable Objects (ArrayBuffer) for large data to avoid expensive copying.
Always call worker.terminate() when done to free resources.
Use Web Workers for: sorting large arrays, parsing JSON/CSV, image processing, cryptography, physics simulations.
Use Service Workers for: caching, offline support, push notifications.

Exam Focus

Revise definitions, diagrams, examples, and short-answer points for Web Workers in JavaScript — Multithreading & Background Tasks Guide.

Interview Use

Prepare one clear explanation, one practical example, and one common mistake for this JavaScript Master Course topic.

Search Terms

javascript-complete-guide, javascript master course, javascript, complete, guide, browser, apis, web

Continue learning this concept

Browser APIsService Workers in JavaScript — Offline, Caching & PWA GuideMaster JavaScript Service Workers for offline support, caching strategies, push notifications, and PWA features. Learn install/activate/fetch lifecycle with real examples and interview Q&A.Browser APIsWeb Storage API in JavaScript — localStorage & sessionStorage GuideMaster the JavaScript Web Storage API — localStorage and sessionStorage. Learn setItem, getItem, removeItem, clear, JSON storage, storage events, and comparisons with cookies and IndexedDB.Browser APIsBrowser Object Model (BOM) in JavaScript — Complete GuideMaster the Browser Object Model (BOM) in JavaScript. Learn window, navigator, location, history, screen objects with real examples, diagrams, and interview Q&A.Browser APIsCanvas API in JavaScript — Complete Drawing & Animation GuideLearn the HTML5 Canvas API in JavaScript. Draw shapes, images, text, and build animations with 2D rendering context. Includes real examples, output blocks, and interview Q&A.Browser APIsDrag and Drop API in JavaScript — Complete TutorialMaster the HTML5 Drag and Drop API in JavaScript. Learn draggable elements, drop zones, DataTransfer, dragstart/dragover/drop events with real examples and interview Q&A.Browser APIsGeolocation API in JavaScript — Get User Location TutorialLearn the JavaScript Geolocation API to get user latitude, longitude, and position accuracy. Covers permissions, getCurrentPosition, watchPosition, error handling, and interview Q&A.

PreviousWeb Storage API in JavaScript — localStorage & sessionStorage Guide NextJavaScript Interview — Behavioral Questions and Soft Skills Guide 2026