web-workers

name	web-workers
description	Offload heavy computation from the main thread using Web Workers, SharedWorkers, and Comlink — structured messaging, transferable objects, and off-main-thread architecture patterns
layer	domain
category	frontend
triggers	["web worker","main thread","off main thread","SharedWorker","Comlink","postMessage","UI is janky","blocking the main thread","heavy computation","worker thread"]
inputs	["Computation or task to offload","Framework in use (React, Vue, vanilla, Next.js)","Build tool (Vite, webpack, Turbopack)","Data transfer requirements (size, frequency)","Whether shared state across tabs is needed"]
outputs	["Worker implementation with typed messaging","Comlink wrapper for RPC-style worker calls","Build configuration for worker bundling","Transfer strategy for large data (Transferable, SharedArrayBuffer)","Error handling and graceful degradation pattern"]
linksTo	["code-splitting","performance-profiler","state-management"]
linkedFrom	["optimize","performance-profiler"]
preferredNextSkills	["performance-profiler","code-splitting"]
fallbackSkills	["optimize"]
riskLevel	low
memoryReadPolicy	selective
memoryWritePolicy	none
sideEffects	[]

Web Workers Skill

Purpose

The browser's main thread handles DOM rendering, event listeners, and JavaScript execution on a single thread. Any computation taking more than ~50ms blocks user interaction and causes visible jank. Web Workers run JavaScript on separate OS threads, keeping the UI responsive while performing heavy computation — parsing, sorting, image processing, cryptography, data transformation, or WASM execution.

Key Concepts

Worker Types

Type	Scope	Use Case
Dedicated Worker	Single page	Heavy computation for one tab
SharedWorker	Multiple tabs/frames on same origin	Shared WebSocket, cross-tab sync
Service Worker	Entire origin (network proxy)	Offline support, push notifications

Communication Model

Main Thread ←→ Worker Thread

postMessage(data)  →  onmessage(event)
onmessage(event)   ←  postMessage(data)

Data is COPIED by default (structured clone algorithm).
Transferable objects can be MOVED (zero-copy) for ArrayBuffers.
SharedArrayBuffer allows TRUE shared memory (requires COOP/COEP headers).

What Workers Cannot Access

• DOM (document, window.document)
• window (workers get self / globalThis)
• localStorage / sessionStorage
• Synchronous XHR (only in workers, but avoid it)

What Workers Can Access

• fetch, WebSocket, IndexedDB, Cache API
• crypto.subtle, TextEncoder/Decoder
• importScripts() (classic) or ES modules
• setTimeout, setInterval, requestAnimationFrame (not in all workers)
• WASM instantiation and execution

Implementation

Basic Dedicated Worker

// worker.ts
self.onmessage = () => {
   { numbers } = event.;

  
   sorted = [...numbers].( a - b);
   mean = sorted.( a + b, ) / sorted.;
   median = sorted[.(sorted. / )];

  self.({ sorted, mean, median });
};