JavaScript Web Workers Cheat Sheet

// main.js - create and communicate with a workerconst worker = new Worker('worker.js');worker.postMessage({ cmd: 'start', payload: 42 }); // send data to workerworker.onmessage = (event) => {  console.log('Result from worker:', event.data); // receive data};worker.onerror = (err) => {  console.error('Worker error:', err.message);};

// worker.js - runs on a separate threadself.onmessage = (event) => {  const { cmd, payload } = event.data;  if (cmd === 'start') {    const result = payload * 2; // heavy computation here    self.postMessage(result);  }};self.onerror = (err) => console.error(err);

// Module worker (ES modules inside a worker)const worker = new Worker('worker.js', { type: 'module' });// worker.jsimport { heavyCalc } from './math.js';self.onmessage = (e) => self.postMessage(heavyCalc(e.data));

// Transferable objects avoid copying large binary dataconst buffer = new ArrayBuffer(1024 * 1024); // 1MBworker.postMessage({ buf: buffer }, [buffer]); // ownership transferred, not copied// buffer.byteLength is now 0 in the main thread after transfer

// main.js - each tab connects to the same shared workerconst worker = new SharedWorker('shared-worker.js');worker.port.start(); // must call start() explicitly for SharedWorkerworker.port.postMessage({ type: 'register', tab: location.pathname });worker.port.onmessage = (e) => {  console.log('Broadcast from other tabs:', e.data);};// shared-worker.jsconst ports = [];self.onconnect = (event) => {  const port = event.ports[0];  ports.push(port);  port.onmessage = (e) => {    // fan out to every connected tab    ports.forEach(p => p.postMessage(e.data));  };};

class WorkerPool {  constructor(url, size = navigator.hardwareConcurrency || 4) {    this.queue = [];    this.workers = Array.from({ length: size }, () => {      const w = new Worker(url);      w.busy = false;      return w;    });  }  run(payload) {    return new Promise((resolve, reject) => {      this.queue.push({ payload, resolve, reject });      this._dispatch();    });  }  _dispatch() {    const worker = this.workers.find(w => !w.busy);    if (!worker || this.queue.length === 0) return;    const { payload, resolve, reject } = this.queue.shift();    worker.busy = true;    worker.onmessage = (e) => { worker.busy = false; resolve(e.data); this._dispatch(); };    worker.onerror = (e) => { worker.busy = false; reject(e); this._dispatch(); };    worker.postMessage(payload);  }}const pool = new WorkerPool('crunch.js');const results = await Promise.all([1, 2, 3].map(n => pool.run(n)));

// Requires cross-origin isolation headers (COOP/COEP) to be enabledconst sab = new SharedArrayBuffer(4);const view = new Int32Array(sab);worker.postMessage(sab); // buffer itself is shared, not transferred// Main thread increments atomicallyAtomics.add(view, 0, 1);// Block the calling thread (only safe inside a worker) until notifiedconst result = Atomics.wait(view, 0, 0, 1000); // 'ok' | 'not-equal' | 'timed-out'Atomics.notify(view, 0, 1); // wake one waiter

// main.jsconst canvas = document.querySelector('canvas');const offscreen = canvas.transferControlToOffscreen(); // canvas becomes worker-ownedconst worker = new Worker('render-worker.js');worker.postMessage({ canvas: offscreen }, [offscreen]);// render-worker.jsself.onmessage = (e) => {  const ctx = e.data.canvas.getContext('2d');  function frame() {    ctx.clearRect(0, 0, 300, 150);    ctx.fillRect(Math.random() * 300, 40, 10, 10);    requestAnimationFrame(frame); // rAF works inside workers too  }  frame();};