HTML Web Workers API

Definition and Usage

The Web Workers API runs a script in a background thread separate from your HTML page’s main thread. Heavy work (big loops, parsing, crunching) can finish without freezing clicks, typing, or animations on the page.

What does this mean for an HTML page?

The main thread owns the DOM: buttons, inputs, and layout. A page script creates a Worker, sends work with postMessage, and when the result returns, updates HTML elements. The worker never touches document directly.

How does messaging work?

Both sides call postMessage(data) and listen with onmessage. The payload is copied (structured clone), not shared by reference—safe plain objects and arrays travel either way.

When should you use workers on a site?

Long CPU tasks that would make the page feel stuck. Skip workers for tiny work that finishes in a few milliseconds. Prefer dedicated workers for one page; shared and service workers cover multi-tab and offline cases.

HTML / Script Syntax

Create a dedicated worker from a page script and exchange messages:

var worker = new Worker("worker.js");

worker.postMessage({ n: 10 });
worker.onmessage = function (event) {
  document.getElementById("out").textContent = event.data;
};
worker.onerror = function (err) {
  console.error(err.message);
};
// worker.terminate();

self.onmessage = function (event) {
  var n = event.data.n;
  postMessage(n * n);
};

<button type="button" id="start">Run in worker</button>
<p id="out"></p>
<script src="main.js"></script>

Core HTML Concepts

How workers relate to your webpage:

Main thread vs worker

How to Use Workers with an HTML Page

Keep the UI on the page; push compute to the worker.

1. Build HTML controls (button, status <p>).
2. Feature-detect: typeof Worker !== "undefined".
3. Create new Worker("worker.js") (same origin).
4. On click, worker.postMessage(input).
5. In worker.onmessage, write event.data into the HTML.
6. Handle onerror; call terminate() when the page no longer needs the worker.

Live Preview

Click to square a number in a background worker, then show the result in the HTML below.

worker.postMessage(n) → onmessage → update <p>

HTML Examples

Five patterns: create a worker, message round-trip, errors, heavy loop, and a full HTML page. Try It demos use Blob workers so they run without a separate worker.js file.

if (typeof Worker === "undefined") {
  alert("Web Workers not supported");
} else {
  var worker = new Worker("worker.js");
  console.log("Worker created");
}

Worker created

worker.postMessage(5);
worker.onmessage = function (event) {
  console.log("Received from worker:", event.data); // 10
};

self.onmessage = function (event) {
  postMessage(event.data * 2);
};

Received from worker: 10

worker.onerror = function (error) {
  console.error("Worker error:", error.message);
};

Worker error: Uncaught ReferenceError: unknownVar is not defined

self.onmessage = function (e) {
  var total = 0, i;
  for (i = 0; i < e.data; i++) total += i;
  postMessage(total);
};

Sum = 499999500000

<button type="button" id="start">Start Worker</button>
<p id="result"></p>
<script>
  var worker = new Worker(URL.createObjectURL(new Blob([
    "self.onmessage=function(e){postMessage(e.data*e.data);};"
  ], { type: "application/javascript" })));

  worker.onmessage = function (e) {
    document.getElementById("result").textContent = "Result: " + e.data;
  };

  document.getElementById("start").onclick = function () {
    worker.postMessage(10);
  };
</script>

Result: 100

Key Takeaways