Skip to content
Optimal Lab

Frontend · interactive

Web Workers

A page animates at 60 frames a second, then starts a 1.2-second calculation (parsing a big file, say). JavaScript on the main thread blocks rendering and input until it finishes. A Web Worker runs it on another thread.

Main thread

calculation

Frames painted

0 s2 s

72 of 119 frames dropped · clicks ignored for 1.2 s

For 1.2 seconds the browser can't paint or respond: the animation freezes and clicks queue up. That's a long task.

Run the calculation on

Step 1 of 4

  1. 1

    One main thread does everything

    JavaScript, style, layout, paint and input handling share it. A long task blocks them all.

    Over 50 ms counts as a long task.

  2. 2

    Workers run on their own thread

    new Worker(url) starts a separate JavaScript context with no DOM access.

    const w = new Worker(new URL("./parse.ts", import.meta.url))

  3. 3

    Communicate by messages

    postMessage copies data across (or transfers ArrayBuffers for free). Comlink makes it feel like function calls.

    Copying huge objects has its own cost.

  4. 4

    Good fits

    Parsing large files, image processing, search indexes, syntax highlighting, running WASM.

    Not for small tasks: startup isn't free.

In production

Tools and technologies

Workers are built into every browser.

Not tied to one language — use these names when you search docs or design a system.