Web Worker Generator

A Web Worker runs JavaScript in a background thread, separate from the main UI thread. Use workers when you have CPU-intensive tasks that would freeze the UI: parsing large JSON files, image processing, cryptographic operations, data compression, complex calculations, or sorting large datasets. The rule of thumb: if a task takes more than 50ms, consider offloading it to a worker. Workers cannot access the DOM but can use fetch, WebSockets, and many other Web APIs.

postMessage copies data between threads (structured clone algorithm). Simple and safe — each thread gets its own copy. Best for most use cases. SharedArrayBuffer allows true shared memory between threads via Atomics — both threads read/write the same memory region. Much faster for large data (no copying), but requires COOP/COEP headers and careful synchronization with Atomics.wait/notify to avoid race conditions. Use SharedArrayBuffer only when you need maximum performance with large binary data.

BroadcastChannel allows multiple tabs, windows, and workers on the same origin to communicate. Unlike postMessage (1-to-1), BroadcastChannel is 1-to-many. Use cases: syncing login/logout state across tabs, broadcasting theme changes, real-time notifications across windows, coordinating shared state in multi-tab apps. It's simpler than SharedWorker for broadcast scenarios but messages are not received by the sender.

Yes, with the module type option: new Worker('./worker.js', { type: 'module' }). Module workers support import/export syntax, top-level await, and dynamic imports. They're supported in Chrome 80+, Firefox 114+, and Safari 15+. For older browser support, use a bundler (Vite/webpack) that bundles worker files. Vite has first-class Worker support: import Worker from './worker?worker'.

Workers have access to: fetch, XMLHttpRequest, WebSockets, IndexedDB, Cache API, crypto, performance, setTimeout/setInterval, importScripts (classic workers), FileReader, Canvas (OffscreenCanvas), and many more. Workers cannot access: DOM, window, document, localStorage (can use IndexedDB instead), alert/confirm. Service Workers additionally have access to the Cache API and can intercept network requests. Use typeof window === 'undefined' to detect worker environment in shared code.