Web Workers in JavaScript

Introduction

Web Workers run JavaScript in a background thread so heavy work does not freeze the UI. They cannot touch the DOM directly—they communicate with the main page via messages. Use workers for parsing large files, crypto, or batch computation while keeping clicks responsive.

Prerequisites

Dedicated Worker

worker.js:

javascript
// worker.js — separate file
self.onmessage = (event) => {
  const n = event.data;
  let sum = 0;
  for (let i = 0; i < n; i++) sum += i;
  self.postMessage({ sum });
};

Main page:

html
<script>
  const worker = new Worker("./worker.js");
 
  worker.onmessage = (event) => {
    console.log("result", event.data.sum);
  };
 
  worker.onerror = (err) => console.error(err.message);
 
  worker.postMessage(1e7);
</script>

Terminate Worker

javascript
worker.terminate();

Create a new Worker instance for another job.

No Shared window

Workers have self instead of window, and no document. Pass serializable data (structured clone)—functions and DOM nodes cannot be sent.

Transferable Objects (Brief)

javascript
// Transfer ArrayBuffer ownership to avoid copy
const buffer = new ArrayBuffer(1024);
worker.postMessage({ buffer }, [buffer]);

After transfer, the sender’s buffer is detached.

Inline Worker with Blob URL

javascript
const code = `
  self.onmessage = (e) => self.postMessage(e.data * 2);
`;
const blob = new Blob([code], { type: "application/javascript" });
const url = URL.createObjectURL(blob);
const worker = new Worker(url);
worker.postMessage(21);
worker.onmessage = (e) => console.log(e.data);
URL.revokeObjectURL(url);

Handy for demos; separate files are clearer in projects.

Service Workers (Mention)

Service workers enable offline caching and push notifications—PWA topic, different API from dedicated workers.

Mini Example: Fibonacci in Worker

fib-worker.js:

javascript
function fib(n) {
  if (n <= 1) return n;
  return fib(n - 1) + fib(n - 2);
}
 
self.onmessage = (e) => {
  const result = fib(e.data);
  self.postMessage(result);
};

Main:

javascript
const w = new Worker("./fib-worker.js");
w.onmessage = (e) => console.log("fib(35)=", e.data);
w.postMessage(35);

UI stays clickable while worker runs—still one CPU core; use worker_threads in Node for server-side parallelism.

FAQ

Workers vs async/await?

Async avoids blocking for I/O; workers help CPU-heavy sync work on the main thread.

Module workers?

new Worker("worker.js", { type: "module" }) allows import in worker files in modern browsers.

Node equivalent?

worker_threads module—similar idea, different API.

What comes next?

Testing JavaScript.