Web Workers

Syntax

const worker = new Worker("worker.js");
worker.postMessage(data);

Examples

// main.js
const worker = new Worker("worker.js");

worker.postMessage({ command: "calculate", number: 40 });

worker.onmessage = (event) => {
  console.log("Result from worker:", event.data);
};

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

// worker.js
self.onmessage = (event) => {
  const { command, number } = event.data;

  if (command === "calculate") {
    const result = fibonacci(number); // expensive, would freeze the UI if run on the main thread
    self.postMessage(result);
  }
};

function fibonacci(n) {
  return n <= 1 ? n : fibonacci(n - 1) + fibonacci(n - 2);
}

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

// ... use the worker ...

worker.terminate(); // immediately stops the worker and frees its resources

Best practices

• Use Web Workers for genuinely expensive, CPU-bound tasks (heavy computation, large data processing) that would otherwise freeze the UI
• Remember workers cannot access the DOM, window, or parent objects directly - all communication happens via postMessage()
• Terminate workers with terminate() once they are no longer needed, to free up system resources
• Keep messages passed to/from workers simple and serializable - complex objects with functions or circular references cannot be passed directly

At a glance

Purpose

Application logic and interaction

File extension

.js · .mjs

Runs in

Browsers and JavaScript runtimes

Usually used with

HTML, CSS and Web APIs

Specifications & further reading

• ECMAScript specification

Related JavaScript documentation