HTML Web Workers API

What You’ll Learn

Web Workers run JavaScript on a background thread so heavy work does not freeze clicks, scroll, or animation on the main page. This tutorial covers creating a Worker, messaging with postMessage / onmessage, error handling, DOM limits, five examples (including inline Blob workers), and how Dedicated Workers compare to Shared Workers.

Creating a Web Worker

Always feature-detect, then create a worker from a script URL:

if (typeof Worker === 'undefined') {
  console.warn('Web Workers not supported');
} else {
  const worker = new Worker('worker.js');
}

In worker.js, listen and reply:

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

Inline worker (single-file demos)

In the Try It editor you often have one HTML file. Put worker code in a string and create a Blob URL:

var code = 'self.onmessage = function(e) { postMessage(e.data * 2); };';
var worker = new Worker(
  URL.createObjectURL(new Blob([code], { type: 'application/javascript' }))
);

Worker created

Communicating with Web Workers

Send from the main thread; receive replies in onmessage:

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

Inside the worker, mirror the pattern:

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

You can send plain objects: worker.postMessage({ action: 'sum', values: [1, 2, 3] }). The worker receives a deep copy (structured clone), not a shared reference.

Handling Errors

Catch runtime errors from the worker script with worker.onerror:

worker.onerror = function (error) {
  console.error('Worker error:', error.message);
  console.error('File:', error.filename, 'Line:', error.lineno);
};

Call worker.terminate() when finished to free memory. Create a new Worker if you need more jobs later.

Examples Gallery

Five starter demos. Use View Output to preview here, or open Try It Yourself to edit and run live (?tryit=1 through 5). Try Its use inline Blob workers so you do not need 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 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

🚀 Common Use Cases

• Data crunching — aggregate analytics, sort large tables, or run simulations.
• File parsing — read CSV, JSON, or logs without blocking typing or scrolling.
• Media processing — resize images, decode audio, or build waveforms.
• Games and editors — pathfinding, physics ticks, or syntax highlighting in the background.
• Progressive enhancement — move expensive work off the main thread when Worker is available.

✨ Advantages

• Keeps the UI thread free for input and animation
• Uses real parallel CPU work in the browser
• Clear messaging API with structured cloning
• Supported across modern desktop and mobile browsers

💡 Usage Tips

• Feature-detect Worker and provide a main-thread fallback for critical paths
• Prefer Blob workers for single-file demos; use separate .js files in production
• Send only the data you need—large clones are expensive
• Use Transferable objects (ArrayBuffer) for zero-copy moves when transferring big buffers
• Call terminate() when a worker is idle for a long time

Important Notes

💡 Best Practices