Multithreaded JavaScript: Web Workers, SharedArrayBuffer & Atomics in Practice

1. Breaking Out of the Single-Threaded Event Loop

When heavy CPU tasks run on the browser's main thread, the entire browser window freezes:

2. Dedicated vs. Shared Workers: Lifecycle and Communication

Web Workers come in two distinct operational models depending on multi-tab requirements:

• Dedicated Workers (new Worker("worker.js")): Linked to a single browser tab. When the tab closes, the worker is immediately destroyed. Ideal for per-page data parsing and component calculations.
• Shared Workers (new SharedWorker("shared.js")): Accessible simultaneously by multiple tabs, iframes, or windows belonging to the same origin. Ideal for shared WebSocket connections, peer-to-peer mesh coordination, and cross-tab state synchronization.

3. SharedArrayBuffer & Zero-Copy Memory Sharing

While standard postMessage clones data (consuming memory bandwidth for gigabyte datasets), SharedArrayBuffer permits multiple threads to map the identical physical memory segment:

// main.js - Allocate 1MB of shared memory
const sharedBuffer = new SharedArrayBuffer(1024 * 1024);
const sharedInt32 = new Int32Array(sharedBuffer);

// Spawn worker and pass buffer pointer (zero copy!)
const worker = new Worker('worker.js');
worker.postMessage({ buffer: sharedBuffer });

// worker.js - Wrap incoming shared buffer
self.onmessage = (event) => {
  const workerInt32 = new Int32Array(event.data.buffer);
  
  // Directly read and write shared memory:
  Atomics.store(workerInt32, 0, 42); // Thread-safe atomic write
};

4. Concurrency Primitives Comparison Matrix

The table below evaluates thread communication mechanisms in the JavaScript runtime:

5. Thread Pool Architecture & Task Dispatching

Spawning a new Web Worker for every computation incurs OS thread instantiation latency (~20–40ms). Production architectures establish a persistent Worker Thread Pool sized to the client hardware concurrency:

class WorkerPool {
  private workers: Worker[] = [];
  private idleWorkers: Worker[] = [];
  private taskQueue: Array<{ payload: any; resolve: Function; reject: Function }> = [];

  constructor(workerScript: string, maxThreads = navigator.hardwareConcurrency || 4) {
    for (let i = 0; i < maxThreads; i++) {
      const w = new Worker(workerScript);
      w.onmessage = (e) => this.onTaskComplete(w, e.data);
      this.workers.push(w);
      this.idleWorkers.push(w);
    }
  }

  public dispatch(payload: any): Promise<any> {
    return new Promise((resolve, reject) => {
      const worker = this.idleWorkers.pop();
      if (worker) {
        worker.postMessage(payload);
        (worker as any)._activeTask = { resolve, reject };
      } else {
        this.taskQueue.push({ payload, resolve, reject });
      }
    });
  }

  private onTaskComplete(worker: Worker, result: any) {
    const task = (worker as any)._activeTask;
    if (task) task.resolve(result);

    const next = this.taskQueue.shift();
    if (next) {
      worker.postMessage(next.payload);
      (worker as any)._activeTask = next;
    } else {
      this.idleWorkers.push(worker);
    }
  }
}

By reusing persistent worker threads across tasks and queuing excess computations, the browser CPU operates at peak sustained throughput with zero allocation thrashing.

6. Thread Synchronization with the Atomics API

To prevent data corruption when multiple workers write to the same buffer, the Atomics object provides indivisible operations and thread-parking coordination:

• Atomics.compareExchange: Implements lock-free atomic CAS (Compare-And-Swap). It tests if an index contains an expected value; if true, it updates the index to a new value in a single hardware cycle.
• Atomics.wait(typedArray, index, value): Halts worker execution until another thread modifies the index or calls Atomics.notify(). Consumes 0% CPU while blocked.
• Atomics.notify(typedArray, index, count): Wakes up waiting worker threads queued on the specified index.

7. Spectre Mitigations: Required COOP & COEP Security Headers

Because SharedArrayBuffer grants sub-microsecond timer resolution capable of measuring CPU cache eviction patterns in speculative execution attacks, browsers isolate cross-origin processes by requiring strict security headers:

# Required to unlock window.crossOriginIsolated and SharedArrayBuffer
add_header Cross-Origin-Opener-Policy "same-origin" always;
add_header Cross-Origin-Embedder-Policy "require-corp" always;

8. Summary: Unlocking True Parallel Computing in the Browser