Web Workers

Running JavaScript in background threads — keeping the UI responsive during heavy computation.

What it is, in plain English: A Web Worker runs JavaScript in a background thread, separate from the main thread that handles the UI. This means heavy computation can run without freezing the page. Workers communicate with the main thread via postMessage() and onmessage — they can't access the DOM directly. SharedArrayBuffer enables shared memory between workers, with Atomics for thread-safe operations.

Moving heavy work off the main thread

JavaScript runs on a single main thread — the same thread that handles user clicks, animations, and DOM updates. If your code does something heavy (processing a large dataset, running image filters, parsing a huge file), it blocks everything else. The page freezes. Buttons don't respond.

Web Workers solve this by running code in a separate background thread.

Creating a worker

// worker.js — runs in background thread
// No access to: window, document, DOM
// Full access to: fetch, setTimeout, IndexedDB, crypto, WebSockets, Canvas (OffscreenCanvas)

self.onmessage = function(event) {
  const numbers = event.data;  // received from main thread

  // Heavy computation — doesn't block the UI:
  const sorted = [...numbers].sort((a, b) => a - b);
  const sum    = sorted.reduce((s, n) => s + n, 0);
  const mean   = sum / sorted.length;

  // Send result back:
  self.postMessage({ sorted, mean });
};

// main.js — the page's JavaScript
const worker = new Worker("worker.js");

// Send data to the worker:
const bigArray = Array.from({ length: 1000000 }, () => Math.random());
worker.postMessage(bigArray);

// Receive result from worker:
worker.onmessage = (event) => {
  const { sorted, mean } = event.data;
  console.log("Mean:", mean.toFixed(4));
  displayResults(sorted);
};

worker.onerror = (error) => {
  console.error("Worker failed:", error.message);
};

// The page stays responsive while the worker computes!
// Buttons still work, animations still play

Terminating a worker

// From the main thread — kill the worker immediately:
worker.terminate();

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

Try It Yourself

// Web Workers run in a separate thread — no DOM access
// but full access to: fetch, setTimeout, IndexedDB, crypto, etc.

// Main thread code:
// You can't run this exact demo (Workers need separate files)
// but here's the concept with inline simulation:

// WHAT A WORKER FILE (worker.js) LOOKS LIKE:
const WORKER_CODE = `
self.onmessage = function(event) {
  const { type, data } = event.data;

if (type === "compute") {
    // Heavy computation here — won't freeze the UI:
    let result = 0;
    for (let i = 0; i < data.iterations; i++) {
      result += Math.sqrt(i);
    }
    // Send result back to main thread:
    self.postMessage({ type: "result", result });
  }
};
`;

// HOW THE MAIN THREAD USES IT:
// const worker = new Worker("worker.js");
//
// worker.postMessage({ type: "compute", data: { iterations: 50000000 } });
//
// worker.onmessage = (event) => {
//   console.log("Result:", event.data.result);
// };
//
// worker.onerror = (error) => {
//   console.error("Worker error:", error.message);
// };
//
// worker.terminate();  // kill the worker when done

// INLINE WORKER using Blob URL (works without a separate file):
const blob   = new Blob([WORKER_CODE], { type: "application/javascript" });
const url    = URL.createObjectURL(blob);
const worker = new Worker(url);

worker.onmessage = (e) => {
  console.log("Worker result:", e.data.result.toFixed(2));
  worker.terminate();
  URL.revokeObjectURL(url);  // clean up
};

worker.postMessage({ type: "compute", data: { iterations: 1000000 } });
console.log("Worker started — main thread is NOT blocked!");
console.log("This runs immediately while worker computes in background.");

Transferable objects, module workers, and Comlink

Transferable objects — zero-copy data transfer

// By default, postMessage() copies data (structured clone algorithm).
// For large ArrayBuffers, transfer ownership instead (zero-copy):

const buffer = new ArrayBuffer(1024 * 1024 * 64);  // 64 MB
const view   = new Uint8Array(buffer);
view.fill(255);

// Transfer (the main thread can no longer use 'buffer' after this):
worker.postMessage({ buffer }, [buffer]);  // second arg: list of transferables

// In the worker — receive it:
self.onmessage = (event) => {
  const view = new Uint8Array(event.data.buffer);
  // process... then optionally transfer back:
  self.postMessage({ buffer: view.buffer }, [view.buffer]);
};

Module workers

// Modern browsers support ES module syntax in workers:
const worker = new Worker("worker.js", { type: "module" });

// worker.js (module worker):
import { heavyFn } from "./utils.js";  // can use imports!

self.onmessage = async (event) => {
  const result = await heavyFn(event.data);
  self.postMessage(result);
};

Comlink — use workers like async functions

// Comlink wraps the postMessage API so workers look like regular async functions.
// npm install comlink

// worker.js:
import { expose } from "comlink";
const api = {
  async processData(data) {
    // heavy computation
    return result;
  },
  fibonacci(n) {
    if (n <= 1) return n;
    return this.fibonacci(n-1) + this.fibonacci(n-2);
  }
};
expose(api);

// main.js:
import { wrap } from "comlink";
const worker = new Worker("worker.js", { type: "module" });
const api    = wrap(worker);

// Call worker functions as if they're async:
const result = await api.processData(bigDataset);
const fib    = await api.fibonacci(40);

SharedArrayBuffer, Atomics, and the worker spec

SharedArrayBuffer — shared memory between threads

// Requires cross-origin isolation headers:
// Cross-Origin-Opener-Policy: same-origin
// Cross-Origin-Embedder-Policy: require-corp

const shared = new SharedArrayBuffer(Int32Array.BYTES_PER_ELEMENT * 4);
const arr    = new Int32Array(shared);

// Main thread writes:
Atomics.store(arr, 0, 42);

// Worker reads the same memory:
// self.onmessage = (e) => {
//   const arr = new Int32Array(e.data.shared);
//   console.log(Atomics.load(arr, 0));  // 42
// };
worker.postMessage({ shared });  // share the buffer

// Atomics — thread-safe operations:
Atomics.add(arr, 0, 8);    // atomic increment
Atomics.sub(arr, 0, 3);    // atomic decrement
Atomics.compareExchange(arr, 0, 47, 100);  // CAS

// Wait/notify — mutex pattern:
// Worker: Atomics.wait(arr, 0, 0)   — block until arr[0] != 0
// Main:   Atomics.notify(arr, 0, 1) — wake one waiting worker

Worker spec — HTML Living Standard §10

Workers run in a separate WorkerGlobalScope (not Window). The structured clone algorithm copies data through postMessage — it handles most JS types but not functions, Symbols, or DOM nodes. Transferable objects (Transferable interface: ArrayBuffer, MessagePort, ImageBitmap, OffscreenCanvas) are zero-copied — the buffer's [[ArrayBufferData]] is detached from the sender and re-attached to the receiver.

Official Sources

The Codex links only to official documentation and the ECMAScript specification. No third-party tutorials.