Web Workers: Run Heavy Computation Without Freezing the UI

JavaScript is single-threaded. Heavy computation on the main thread blocks everything — animations, input response, scrolling. Web Workers run JS in a background thread.

When to Use Workers

Use a Web Worker for tasks taking more than ~16ms:

• Parsing large JSON or CSV files
• Image processing
• Cryptographic operations
• Complex data transformations over large datasets

Basic Setup

// worker.ts
self.addEventListener('message', (event: MessageEvent) => {
  const { data, operation } = event.data;
  if (operation === 'sort') {
    const sorted = data.sort((a: number, b: number) => a - b);
    self.postMessage({ result: sorted });
  }
});

// main.ts
const worker = new Worker(new URL('./worker.ts', import.meta.url), { type: 'module' });

worker.addEventListener('message', (event) => setData(event.data.result));

function sortInBackground(data: number[]) {
  worker.postMessage({ operation: 'sort', data });
  // Returns immediately — UI stays responsive
}

Comlink: The Clean API

// worker.ts
import { expose } from 'comlink';
expose({ async parseCSV(csv: string) { return parse(csv); } });

// main.ts
import { wrap } from 'comlink';
const api = wrap<typeof api>(new Worker('./worker.ts'));
const result = await api.parseCSV(csvString); // runs in worker

Transferable Objects

For large ArrayBuffers, transfer ownership instead of copying:

const buffer = new ArrayBuffer(100 * 1024 * 1024);
worker.postMessage({ buffer }, [buffer]); // zero-copy transfer

Web Workers, optimistic updates, code splitting — the performance patterns that separate fast apps from slow ones are part of the Ship Fast Skill Pack.