Introduction to Web Workers

By /

Offloading Tasks for Better Performance

Photo by sol on Unsplash

In the world of web development, delivering a smooth and responsive user experience is paramount. However, complex calculations, large data processing, or other resource-intensive operations executed directly within the main thread of a web page can lead to the dreaded “jank” — UI freezing, unresponsiveness, and a frustrated user. This is because the main thread is responsible for everything from rendering the UI and handling user input to executing JavaScript. When a long-running script blocks the main thread, the browser cannot update the page or respond to user interactions. This is where Web Workers come to the rescue. Web Workers provide a way to run scripts in background threads, separate from the main execution thread, allowing you to offload heavy computational tasks without impacting the responsiveness of your web page. This article will introduce you to the concept of Web Workers, explain their benefits, and show you how to use them to build more performant and user-friendly web applications.

The Problem: The Main Thread Bottleneck

Modern web applications often need to perform tasks that require significant processing power or time. Examples include:

  • Processing large datasets fetched from an API.
  • Performing complex mathematical calculations.
  • Image manipulation.
  • Running physics engines for games.
  • Syntax highlighting large code blocks.

When these tasks are executed on the main thread, they can block the browser’s event loop. This means that while the script is running, the browser is unable to process other events, such as clicks, scrolls, or keyboard input, or update the visual display. The result is a frozen or sluggish interface, leading to a poor user experience. Think of the main thread as a single lane road — if a large truck (your heavy task) is blocking the road, no other vehicles (user interactions, rendering updates) can pass until the truck is gone.

What are Web Workers?

Web Workers are a simple means for web content to run scripts in background threads. Once created, a worker can send messages to the JavaScript code that created 1 it and vice versa. They do not have access to the DOM or the windowobject, which prevents them from directly interfering with the user interface and ensures they don’t block the main thread. Workers run in an isolated environment with their own global scope.

The key benefits of using Web Workers are:

  • Improved Performance: Heavy tasks are moved off the main thread, keeping the UI responsive.
  • Smoother User Experience: Users can continue to interact with the page while background tasks are running.
  • Better Utilization of Multi-core Processors: Workers can take advantage of multi-core CPUs by running tasks in parallel.

Types of Web Workers

There are two main types of Web Workers:

  1. Dedicated Workers: These are the most common type. A dedicated worker is spawned by a single script and is owned by that script. Only the script that created it can communicate with it.
  2. Shared Workers: A shared worker can be accessed by multiple scripts running in different windows, tabs, or iframes of the same origin. This allows different parts of your application to coordinate and share data through a single worker instance.

This article will focus primarily on Dedicated Workers as they are simpler and cover the most common use cases for offloading tasks.

Communicating with Web Workers: postMessage and onmessage

Communication between the main thread and a Web Worker happens through a message-passing system using the postMessage() method and the onmessage event handler.

  • postMessage(message): Used to send data from one thread to another (main thread to worker, or worker to main thread). The message can be almost any JavaScript object, including strings, numbers, arrays, and even complex objects. Structured cloning is used to pass the data, meaning a copy of the object is transferred, not a reference.
  • onmessage: An event handler attached to the worker object (in the main thread) or the self object (inside the worker) that is triggered when a message is received. The message data is available in the event.data property of the event object passed to the handler.

Here’s a conceptual look at the communication flow:

    A[Main Thread Script] --> B(Worker Instance)
    B --> A
    A -- postMessage() --> B
    B -- onmessage event --> A
    B -- postMessage() --> A
    A -- onmessage event --> B

Let’s illustrate how to use a Dedicated Web Worker with examples.

Example 1: Offloading a CPU-Intensive Calculation

Imagine we need to calculate a large prime number. Doing this on the main thread would freeze the UI.

HTML (index.html):

<!DOCTYPE html>
<html>
<head>
<title>Web Worker Example</title>
</head>
<body>
  <h1>Web Worker Prime Number Calculation</h1>
  <p>Click the button to find a large prime number using a Web Worker.</p>
  <button id="find-prime">Find Prime</button>
  <div id="result"></div>
  <p>You can still interact with the page while the calculation is running.</p>
</body>
<script src="main.js"></script>
</html>

Main Thread Script (main.js):

const findPrimeButton = document.getElementById('find-prime');
const resultDiv = document.getElementById('result');

Worker Script (worker.js):

// This script runs in the worker thread

function isPrime(num) {
  if (num <= 1) return false;
  if (num <= 3) return true;
  if (num % 2 === 0 || num % 3 === 0) return false;
  for (let i = 5; i * i <= num; i = i + 6) {
    if (num % i === 0 || num % (i + 2) === 0) return false;
  }
  return true;
}
// Listen for messages from the main thread
self.onmessage = function(event) {
  if (event.data === 'start') {
    // Simulate a heavy calculation: find a large prime
    let num = 1000000000; // Start searching from a large number
    let prime = 0;
    while (true) {
      if (isPrime(num)) {
        prime = num;
        break;
      }
      num++;
      // Add a small delay to make the heavy task more noticeable
      // In a real scenario, the calculation itself would be the delay
      // This is just for demonstration purposes
      // You wouldn't typically use setTimeout in a tight calculation loop
      // but it helps visualize the non-blocking nature here.
       if (num % 100000 === 0) {
           // This check is just to prevent the loop from running indefinitely
           // in a real prime finding algorithm, you'd have a limit.
       }
    }
    // Send the result back to the main thread
    self.postMessage(prime);
  }
};

Explanation of the Result:

  • When the HTML page loads, the “Find Prime” button and a result area are displayed. The main thread is idle and responsive.
  • Clicking the “Find Prime” button in main.js:
  • Sets the result text to “Calculating…”.
  • Creates a new DedicatedWorker instance, loading the worker.js script in a separate thread.
  • Sets up onmessage and onerror handlers to receive results or errors from the worker.
  • Sends the message ‘start’ to the worker using postMessage().
  • In the worker.js script:
  • The onmessage handler receives the ‘start’ message.
  • The while(true) loop begins searching for a prime number starting from 1,000,000,000. Crucially, this heavy calculation runs entirely within the worker thread. The main thread is not blocked.
  • While the worker is busy calculating, the user can still scroll the page, click other (non-existent in this simple example) buttons, or interact with other elements on the page without experiencing freezing.
  • Once the worker finds a prime number, it sends the result back to the main thread using self.postMessage(prime).
  • In main.js, the worker.onmessage handler receives the prime number.
  • It updates the resultDiv with the found prime number.
  • It terminates the worker using worker.terminate(), freeing up resources.

The key takeaway is that the heavy prime calculation did not block the main thread, demonstrating how Web Workers maintain UI responsiveness.

Example 2: Sending Data to and from a Worker

Let’s send a number to a worker and have it calculate the factorial of that number.

HTML (index.html):

<!DOCTYPE html>
<html>
<head>
<title>Web Worker Data Exchange</title>
</head>
<body>
  <h1>Web Worker Factorial Calculation</h1>
  <label for="number-input">Enter a number:</label>
  <input type="number" id="number-input" value="10">
  <button id="calculate-factorial">Calculate Factorial</button>
  <div id="factorial-result"></div>
</body>
<script src="main.js"></script>
</html>

Main Thread Script (main.js):

const numberInput = document.getElementById('number-input');
const calculateButton = document.getElementById('calculate-factorial');
const factorialResultDiv = document.getElementById('factorial-result');

let factorialWorker = null;
calculateButton.addEventListener('click', () => {
  const number = parseInt(numberInput.value);
  if (isNaN(number)) {
    factorialResultDiv.textContent = 'Please enter a valid number.';
    return;
  }
  if (factorialWorker) {
    factorialWorker.terminate();
    factorialWorker = null;
  }
  factorialResultDiv.textContent = 'Calculating factorial...';
  // Create a new worker
  factorialWorker = new Worker('factorial-worker.js');
  // Listen for messages from the worker
  factorialWorker.onmessage = function(event) {
    const result = event.data;
    factorialResultDiv.textContent = `The factorial is: ${result}`;
    factorialWorker.terminate();
    factorialWorker = null;
  };
  // Listen for errors
  factorialWorker.onerror = function(error) {
    factorialResultDiv.textContent = `Error in worker: ${error.message}`;
    console.error('Worker error:', error);
    factorialWorker.terminate();
    factorialWorker = null;
  };
  // Send the number to the worker
  factorialWorker.postMessage(number);
});

Worker Script (factorial-worker.js):

// This script runs in the worker thread

function calculateFactorial(n) {
  if (n < 0) {
    return 'Factorial is not defined for negative numbers';
  } else if (n === 0) {
    return 1;
  } else {
    let result = 1;
    for (let i = 1; i <= n; i++) {
      result *= i;
    }
    return result;
  }
}
// Listen for messages from the main thread
self.onmessage = function(event) {
  const numberToCalculate = event.data;
  const factorialResult = calculateFactorial(numberToCalculate);
  // Send the result back to the main thread
  self.postMessage(factorialResult);
};

Explanation of the Result:

  • When the HTML page loads, an input field for a number, a “Calculate Factorial” button, and a result area are shown.
  • The user enters a number (e.g., 10) into the input field.
  • Clicking the “Calculate Factorial” button in main.js:
  • Retrieves the number from the input.
  • Sets the result text to “Calculating factorial…”.
  • Creates a new DedicatedWorker instance, loading factorial-worker.js.
  • Sets up onmessage and onerror handlers.
  • Sends the entered number to the worker using worker.postMessage(number).
  • In the factorial-worker.js script:
  • The onmessage handler receives the number from the main thread via event.data.
  • It calls the calculateFactorial function with the received number.
  • The calculateFactorial function computes the factorial. While this specific example is not extremely heavy for small numbers, the principle applies to more intensive calculations.
  • The worker sends the computed factorial result back to the main thread using self.postMessage(factorialResult).
  • In main.js, the factorialWorker.onmessage handler receives the factorial result.
  • It updates the factorialResultDiv with the calculated factorial.
  • It terminates the worker.

This example demonstrates the basic pattern of sending data to a worker for processing and receiving the result back on the main thread, all without blocking the UI.

Web Workers are a fundamental tool in the modern web developer’s arsenal for building high-performance applications. By enabling the execution of demanding tasks in background threads, they effectively solve the problem of the main thread bottleneck, ensuring that your user interface remains responsive and smooth even during intensive operations. Understanding how to create workers, communicate with them using postMessage and onmessage, and when to use Dedicated versus Shared workers is crucial for optimizing the performance and user experience of your web applications. As a Senior JavaScript Developer, leveraging Web Workers is a key strategy for delivering fast, non-blocking, and professional-grade web experiences.

Introduction to Web Workers was originally published in CarlosRojasDev on Medium, where people are continuing the conversation by highlighting and responding to this story.

Scroll to Top