Workers for CPU-heavy work off the main thread

Understanding Workers for CPU-heavy work off the main thread

Everything earlier in this section moves work in time, not in space: a promise records that a result will arrive later, and the event loop fills the gaps where the thread would otherwise sit idle waiting on a socket or a timer. A tight numeric loop creates no gap at all, because it holds the call stack from its first iteration to its last, so wrapping it in `new Promise` or marking the function `async` only changes when the result is announced, never who computes it. That is why a 400ms hash or sort stalls scrolling, animation and clicks no matter how modern the syntax around it looks. Running two pieces of JavaScript at the same instant requires a second thread, and in the browser that thread is a Worker.

Picture a worker as a second JavaScript runtime rather than a background function: it has its own thread, its own global object (`self`, no `window` and no DOM), its own heap, and its own event loop with its own microtask queue. It cannot see your variables, so there is nothing to lock and no data race on ordinary objects; the single channel is `postMessage`, and values crossing it are deep-copied by the structured clone algorithm or explicitly handed over with a transfer list. Isolation is the price of parallelism here: the worker gets a real core, and you give up shared state in exchange.

The interface is event-shaped, `postMessage` out and `onmessage` in, which is the callback style from earlier lessons, so the natural bridge is one promise per job: resolve inside `onmessage`, reject inside `onerror`. Once each job is a promise, `Promise.all` over several workers finally means what people assume it means, because those jobs genuinely run at once on different cores, whereas `Promise.all` over CPU-bound promises on one thread is a sequential run with extra bookkeeping. Budget for the overhead, though: spawning a worker costs a few milliseconds and cloning costs time proportional to payload size, so the pattern pays for jobs measured in tens of milliseconds, not for doubling a number.

Because the worker holds no reference to your objects, everything it needs must be sent as data, which also forces a useful design habit: the code you move is a pure function of its input.

const workerSource = `
  self.onmessage = (event) => {
    const limit = event.data;
    let count = 0;
    for (let n = 2; n < limit; n++) {
      let prime = true;
      for (let d = 2; d * d <= n; d++) {
        if (n % d === 0) { prime = false; break; }
      }
      if (prime) count++;
    }
    self.postMessage(count);
  };
`;

const url = URL.createObjectURL(new Blob([workerSource], { type: 'text/javascript' }));
const worker = new Worker(url);

function countPrimes(limit) {
  return new Promise((resolve, reject) => {
    worker.onmessage = (event) => resolve(event.data);
    worker.onerror = (event) => reject(new Error(event.message));
    worker.postMessage(limit);
  });
}

console.log('main: job posted');

countPrimes(1000000).then((count) => {
  console.log('main: primes below 1000000 =', count);
  worker.terminate();
  URL.revokeObjectURL(url);
});

console.log('main: main thread still free, clicks and paints keep working');

Worked examples

function countMultiples(n) {
  return new Promise((resolve) => {
    let hits = 0;
    for (let i = 0; i < n; i++) {
      if (i % 7 === 0) hits++;
    }
    resolve(hits);
  });
}

setTimeout(() => console.log('timer: I was due immediately'), 0);

console.log('before');
countMultiples(300000000).then((hits) => console.log('promise resolved with', hits));
console.log('after');

const source = `
  self.onmessage = (event) => {
    const total = event.data;
    let acc = 0;
    for (let i = 1; i <= total; i++) {
      acc += i;
      if (i % (total / 4) === 0) {
        self.postMessage({ type: 'progress', percent: (i / total) * 100 });
      }
    }
    self.postMessage({ type: 'done', acc });
  };
`;

const worker = new Worker(URL.createObjectURL(new Blob([source], { type: 'text/javascript' })));

function sumTo(total) {
  return new Promise((resolve) => {
    worker.onmessage = ({ data }) => {
      if (data.type === 'progress') console.log('progress:', data.percent + '%');
      else resolve(data.acc);
    };
    worker.postMessage(total);
  });
}

sumTo(40000000).then((acc) => {
  console.log('sum:', acc);
  worker.terminate();
});

const source = `
  self.onmessage = (event) => {
    const bytes = new Uint8Array(event.data);
    let sum = 0;
    for (let i = 0; i < bytes.length; i++) {
      bytes[i] = bytes[i] * 2;
      sum += bytes[i];
    }
    self.postMessage({ sum, buffer: event.data }, [event.data]);
  };
`;

const worker = new Worker(URL.createObjectURL(new Blob([source], { type: 'text/javascript' })));

worker.onmessage = ({ data }) => {
  console.log('sum from worker:', data.sum);
  console.log('buffer came back with byteLength', data.buffer.byteLength);
  worker.terminate();
};

const buffer = new ArrayBuffer(1024 * 1024);
new Uint8Array(buffer).fill(1);

console.log('before send, byteLength:', buffer.byteLength);
worker.postMessage(buffer, [buffer]);
console.log('after send, byteLength:', buffer.byteLength);

Important notes

Common mistakes

Try it yourself