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.

Where this bites you

postMessage sends a copy of your data (a structured clone), and the copy keeps only the data, not the class. Post an instance of your own class to a worker and what arrives is a plain object with the same fields but none of the methods. The first order.total() inside the worker throws, and from the page all you see is a vague worker error event.

// main.js
class Order {
  constructor(items) { this.items = items; }
  total() { return this.items.reduce((sum, i) => sum + i.price * i.qty, 0); }
}

const worker = new Worker("order-worker.js");
worker.onmessage = (e) => console.log("total:", e.data);
worker.onerror   = (e) => console.log("worker error:", e.message);
worker.postMessage(new Order([{ price: 499, qty: 2 }, { price: 99, qty: 1 }]));

// order-worker.js
self.onmessage = (event) => {
  const order = event.data;          // arrives as a plain object: the class is gone
  self.postMessage(order.total());
};
// worker error: Uncaught TypeError: order.total is not a function

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

Treat messages as plain data, as the number-array example above does. When you need the behaviour on the other side, put the class in a shared module that both the page and a module worker import (module workers are covered in the Intermediate tab), and rebuild the object from the data it receives:

// order.js -- shared by the page and the worker
export class Order {
  constructor(items) { this.items = items; }
  total() { return this.items.reduce((sum, i) => sum + i.price * i.qty, 0); }
  static from(data) { return new Order(data.items); }   // rebuild from plain data
}

// order-worker.js (module worker)
import { Order } from "./order.js";

self.onmessage = (event) => {
  const order = Order.from(event.data);   // turn the plain copy back into an Order
  self.postMessage(order.total());
};

// main.js (<script type="module">)
const worker = new Worker("order-worker.js", { type: "module" });
// total: 1097

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.