Web Workers

Web Workers enable JavaScript to run scripts in background threads, separate from the main execution thread. This allows heavy computations or continuous tasks without freezing the user interface.

Why Use Web Workers?

• Keep the UI responsive during heavy computations.
• Perform parallel processing in browsers.
• Handle tasks like data processing, file parsing, or network requests without blocking.

Creating a Web Worker

A worker is created by passing a JavaScript file URL to the Worker constructor:

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

// Send data to the worker
worker.postMessage('Hello Worker');

// Receive messages from the worker
worker.onmessage = (event) => {
  console.log('Message from worker:', event.data);
};

The worker.js file contains the code running in the background thread:

self.onmessage = (event) => {
  const message = event.data;
  // Perform some work
  const result = message.toUpperCase();

  // Send result back to main thread
  self.postMessage(result);
};

Communication Model

• Main thread and worker exchange messages via postMessage().
• Messages are copied, not shared — no direct access to variables.
• Data passed must be serializable (e.g., strings, objects, arrays).

Types of Web Workers

Terminating a Worker

To stop a worker and free resources:

• From main thread: worker.terminate()
• From inside worker: self.close()

Example Use Case: Heavy Calculation

Without workers, a heavy loop blocks UI. Using a worker, it runs smoothly:

// Main thread
const worker = new Worker('calcWorker.js');
worker.postMessage(1000000000); // large number

worker.onmessage = e => {
  console.log('Sum:', e.data);
  worker.terminate();
};

// Worker calcWorker.js
self.onmessage = e => {
  const n = e.data;
  let sum = 0;
  for (let i = 1; i <= n; i++) {
    sum += i;
  }
  self.postMessage(sum);
  self.close();
};