JavaScript Web Workers Cheat Sheet

Covers creating dedicated workers, message passing with postMessage, transferable objects, and the limits of the worker global scope.

2 PagesIntermediateApr 10, 2026

Creating & Messaging a Worker

Spawn a worker and exchange messages from the main thread.

javascript

// 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);};

Inside the Worker Script

The worker's own scope has no DOM but can compute and respond.

javascript

// 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 Workers

Load ES modules inside a worker with the type option.

javascript

// 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));

Worker Types & Scope

Key APIs and worker categories you'll encounter.

Dedicated Worker- Single script owned by one main thread; created with new Worker(url)
Shared Worker- Can be accessed by multiple scripts/tabs from the same origin via SharedWorker(url)
Service Worker- Proxy between app and network, enables offline caching and push notifications
self- Reference to the worker's own global scope (WorkerGlobalScope)
importScripts()- Synchronously loads one or more scripts into a classic (non-module) worker
postMessage()- Sends a structured-cloned message to the other side of the channel
terminate()- Immediately stops a worker from the main thread; no cleanup runs
close()- Called inside a worker to stop itself
No DOM access- Workers cannot touch window, document, or the DOM directly

Transferable Objects

Move large binary data between threads without copying.

javascript

// 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

Pro Tip

Prefer transferable objects (like ArrayBuffer) over structured cloning for large binary payloads - postMessage(data, [buffer]) moves ownership instead of copying, which is dramatically faster for big datasets.

Was this cheat sheet helpful?

JavaScript Modules (ESM/CJS) Cheat Sheet

Modern JavaScript (ES2020+) Cheat Sheet

Explore Topics

#JavaScriptWebWorkers#JavaScriptWebWorkersCheatSheet#Programming#Intermediate#CreatingMessagingAWorker#InsideTheWorkerScript#ModuleWorkers#WorkerTypesScope#OOP#WebDevelopment#CheatSheet#SkillVeris

Sri Hayavadhana Info-Tech

Professional Web Designing Services