Web Workers — How to Use Multi-Threading in JavaScript
Structured Clone of postMessage and SharedArrayBuffer
JavaScript is single-threaded. Heavy computation on main thread freezes UI. Web Workers solve this.
postMessage Data Transfer
Structured Clone (default): deep copy. 1GB array = 1GB copy cost.
Transferable Objects: ownership transfer. No copy, but original becomes unusable.
SharedArrayBuffer: shared memory. Both threads access same memory simultaneously. Atomics API for synchronization. COOP/COEP headers required.
No DOM Access
Workers can't access document or window. UI updates must be sent back via postMessage.
Why Tooscut Uses Workers
Tooscut transfers OffscreenCanvas to a Worker, runs WASM compositor with WebGPU rendering inside — exactly this pattern.
Key Points
Create separate thread with new Worker("worker.js")
Send data via postMessage — Structured Clone (default) or Transferable (ownership transfer)
Worker computes then returns result via postMessage
SharedArrayBuffer for shared memory — Atomics for sync (COOP/COEP required)