Web Workers

Hard

Web Workers enable multi-threading in JavaScript by running scripts in background threads. This keeps the main thread free for UI updates, preventing the page from freezing during heavy computations.

Interactive Visualization

Code
1// main.js
2const worker = new Worker('worker.js');
3
4worker.postMessage('Hello!');
5
6worker.onmessage = (e) => {
7  console.log('Reply:', e.data);
8};
9
10// worker.js
11onmessage = (e) => {
12  postMessage('Got: ' + e.data);
13};
Threads
Main Threadbusy
Creating worker
Step 1/5Creating a new Web Worker spawns a separate JavaScript thread
1 / 5
💡 Key Insight: Web Workers run JavaScript in background threads, keeping the main thread responsive for UI updates.

Key Points

  • Workers run in separate threads (true parallelism)
  • Main thread stays responsive during heavy computation
  • Communication via postMessage (data is copied, not shared)
  • Workers have no DOM access (no document, window, etc.)
  • SharedArrayBuffer allows shared memory between threads
  • Service Workers: special workers for offline caching and network interception

Code Examples

Basic Worker

// main.js
const worker = new Worker("worker.js");

// Send data to worker
worker.postMessage({ numbers: [1, 2, 3, 4, 5] });

// Receive result from worker
worker.onmessage = (e) => {
  console.log("Sum:", e.data.sum);
};

// worker.js
self.onmessage = (e) => {
  const sum = e.data.numbers.reduce((a, b) => a + b);
  self.postMessage({ sum: sum });
};

Worker runs in background thread

Heavy Computation

// Without worker: UI freezes!
function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}
fibonacci(45);  // Blocks for seconds!

// With worker: UI stays responsive
const worker = new Worker("fib-worker.js");
worker.postMessage(45);
worker.onmessage = (e) => {
  console.log("Result:", e.data);
};

// User can still click buttons!

Offload heavy work to keep UI responsive

Transferable Objects

// postMessage copies data (slow for large data)

const bigArray = new Float32Array(1000000);

// SLOW: Data is copied
worker.postMessage(bigArray);

// FAST: Transfer ownership (zero-copy)
worker.postMessage(bigArray, [bigArray.buffer]);

// After transfer, bigArray is empty!
console.log(bigArray.length);  // 0

// Worker now owns the buffer

Transfer large data without copying

SharedArrayBuffer

// Create shared memory
const shared = new SharedArrayBuffer(4);
const view = new Int32Array(shared);

// Pass to worker (no copy!)
worker.postMessage(shared);

// Both threads see same memory
view[0] = 42;  // Worker sees this!

// Use Atomics for thread-safe access
Atomics.add(view, 0, 1);
Atomics.load(view, 0);  // 43

// Note: Requires COOP/COEP headers

SharedArrayBuffer for shared memory

Worker Pool

class WorkerPool {
  constructor(size, script) {
    this.workers = Array(size).fill(null)
      .map(() => new Worker(script));
    this.queue = [];
    this.available = [...this.workers];
  }

  run(data) {
    return new Promise((resolve) => {
      const task = { data, resolve };

      if (this.available.length > 0) {
        this.dispatch(task);
      } else {
        this.queue.push(task);
      }
    });
  }

  dispatch(task) {
    const worker = this.available.pop();
    worker.onmessage = (e) => {
      task.resolve(e.data);
      this.available.push(worker);
      if (this.queue.length > 0) {
        this.dispatch(this.queue.shift());
      }
    };
    worker.postMessage(task.data);
  }
}

Pool workers for efficient parallel processing

Service Worker

// Register service worker
navigator.serviceWorker.register("/sw.js");

// sw.js - Intercept network requests
self.addEventListener("fetch", (e) => {
  e.respondWith(
    caches.match(e.request).then((cached) => {
      // Return cached version or fetch
      return cached || fetch(e.request);
    })
  );
});

// Cache resources for offline use
self.addEventListener("install", (e) => {
  e.waitUntil(
    caches.open("v1").then((cache) => {
      return cache.addAll(["/", "/app.js"]);
    })
  );
});

Service Workers enable offline-first apps

Common Mistakes

  • Trying to access DOM from a worker (not allowed)
  • Sending large data without using Transferable objects
  • Not handling worker errors (silent failures)
  • Creating too many workers (overhead)

Interview Tips

  • Explain when to use Web Workers vs main thread
  • Know the difference between copying and transferring data
  • Understand SharedArrayBuffer and Atomics for thread safety
  • Explain Service Workers and their use cases (PWA, offline)

Related Concepts

Event Loop

How async JavaScript works

Node.js Event Loop

Libuv phases and async patterns

Critical Render Path

How browsers render pages