HTML5 Web Workers: Multi-threaded JavaScript in Action

JavaScript is historically a single-threaded language, meaning it can only perform one task at a time. If you run a heavy computation (like processing large images, pathfinding algorithms, or cryptography), the entire page freezes, and the user cannot click buttons or scroll. HTML5 introduces Web Workers to solve this.

1. What is a Web Worker?

A Web Worker is a JavaScript file running in the background, entirely separate from the main browser thread.

• Main Thread: Handles user interactions, layout rendering, and DOM manipulation.
• Worker Thread: Handles heavy calculations, complex data fetching, and runs in the background.

2. Setting Up a Basic Web Worker

Because Workers run in a isolated thread, the main script and the worker script communicate by passing messages using the postMessage() method and listening to the message event.

Step 1: Create the Worker Script (worker.js)

This script listens for input, performs the work, and sends back the result:

// worker.js
self.onmessage = function(event) {
  const num = event.data;
  console.log("Worker received number:", num);

  // Perform heavy calculation (e.g., calculating Fibonacci)
  const result = fibonacci(num);

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

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

Step 2: Integrate Worker in the Main Thread (main.js)

The main thread initializes the worker, sends data, and listens for the returned result:

// main.js
if (window.Worker) {
  // 1. Initialize the Web Worker using the script file path
  const myWorker = new Worker('worker.js');

  // 2. Send data to the worker
  myWorker.postMessage(40); 

  // 3. Listen for responses from the worker
  myWorker.onmessage = function(event) {
    console.log("Main thread received result:", event.data);
    
    // Terminate worker when no longer needed to free memory
    myWorker.terminate();
  };
} else {
  console.log("Your browser does not support Web Workers.");
}

3. Web Worker Limitations

Because Web Workers run in an isolated environment, they have strict rules and limitations:

1. No DOM Access: Workers cannot access the document, window, or parent page elements directly. You cannot run document.getElementById() inside a worker.
2. Same-origin Policy: The worker script file must be hosted under the same domain and protocol as the main page.
3. No Global Access: Workers do not have access to global variables or browser functions like alert(). However, they can use core features like fetch(), setTimeout(), and Web Storage.

4. Key Takeaways

Web Workers are the ultimate tool to maintain a consistent 60fps UI experience for your users. Offload complex arithmetic, data parsing, or text pattern searches to Workers, and keep your main thread dedicated to handling smooth animation transitions and user input clicks.