Understanding Javascript Web Worker: Beginners Guide

JavaScript is a powerful and widely used programming language for web development. An understanding of Web Workers requires grasping the fundamental difference between single-threaded and multi-threaded execution. By default, JavaScript operates as a single-threaded language, meaning it can only execute task one after another. On the contrary, multi-threaded languages allow for parallel processing, which means they allow multiple task to run simultaneously, significantly speeding up the overall process.

Since JavaScript is a single-threaded language, it can subsequently experience performance issues, especially when handling heavy computations or long-running tasks. To address this limitation, Web Workers were introduced, allowing JavaScript to run tasks in the background without blocking the main thread.

In this article, we’ll explore the concepts of single-threaded and multi-threaded execution, the limitations of JavaScript’s single-threaded model, and how Web Workers help solve these problems. We’ll also see examples to illustrate the differences and benefits of using Web Workers.

Understanding Single-Threaded vs. Multi-Threaded Execution

Single-Threaded Execution

A single-threaded process means that only one task can be executed at a time. In JavaScript, this is known as the Main Thread. The execution follows a synchronous flow where each line of code must complete before moving on to the next.

// This for loop must be completed
for (let i = 0; i < 10000; i++) {
    console.log(i);
}

// Before this code can be executed
console.log("Hello World");

The problem with this approach is that if a task takes too long to be completed, it would block the main thread, preventing further executions which can lead to an unresponsive browser and a frustrating user experience.

You can imagine the single-thread as a queue in a single checkout counter where everyone needs to wait their turn. The more products in a customer’s cart, the more others have to wait for the checkout to be finalized.

Multi-Threaded Execution

A multi-threaded process allows multiple tasks to run in parallel, each in its own thread. This approach improves performance by allowing background tasks to execute independently, ensuring the main application remains responsive.

You can think of it as multiple checkout counters where you can move to another counter if the queue in the other is much.

Web Workers introduce multi-threading capabilities to JavaScript, enabling developers to run expensive computations in the background without freezing the main UI thread.

The Impact of JavaScript’s Single-Threaded Nature

Because JavaScript operates on a single thread, it follows an event loop mechanism to handle tasks asynchronously. However, when a script runs a CPU-intensive operation (e.g., sorting a large dataset, performing complex calculations), it blocks the main thread. This results in:

• Slow performance
• Laggy UI interactions
• Page unresponsiveness (browser freezing)

Example of Bad Performance in JavaScript’s Single Thread

Let’s consider a scenario where we run a heavy computation inside the main thread:

function task() {
    let sum = 0;
    for (let i = 0; i < 1000000000; i++) { // Loop runs a billion times
        sum += i;
    }
    console.log('Task finished:', sum);
}

console.log('Task started');

task(); // Simulating a heavy computation

console.log('Task completed');

Expected Outcome:

• The browser will freeze while executing task() because the computation power to run 1 billion times is too much. Thus, making the page unresponsive.
• No user interaction can occur until the computation is finished. Clicking on a button while task() is running will cause the button not to function.
• If this task were part of an interactive application, users would experience frustrating delays.

How Web Workers Solve the Problem

Web Workers allow JavaScript to run scripts in the background, freeing up the main thread to handle UI interactions smoothly. Instead of performing expensive operations on the main thread, Web Workers execute tasks in a separate thread, preventing UI blocking.

Implementing Web Workers

To use a Web Worker, you first create a separate JavaScript file (e.g., worker.js) that contains the (resource intensive) code you want to run in the background. Then, in your main JavaScript file, you create a new Worker() object, and pass the worker file as an argument.

Let’s modify our previous example to use a Web Worker and prevent the UI from freezing.

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

// worker.js

// receive message from the main thread
self.onmessage = function(event) {
    let sum = 0;
    for (let i = 0; i < event.data; i++) {
        sum += i;
    }
    self.postMessage(sum); // Send result back to the main thread
};

• The self.onmessage event is used to receive message from the main javascript thread
• The self.postMessage is used to send message back to the main javascript thread

Step 2: Use the Worker in the Main Script (main.js)

// main.js

// Create a new background thread (worker)
const myWorker = new Worker('worker.js');

console.log('Task started');

// send message to the worker
myWorker.postMessage(1000000000); // Send task to worker

// receive message from the worker
myWorker.onmessage = function(event) {
    console.log('Task finished:', event.data);
};

console.log('Task running in the background');

• In this scenario, myWorker is the worker that runs in the background
• The onmessage event is used to receive message from the worker
• The postMessage event sends message to the worker

Explanation:

1. The main thread creates a Worker instance and sends data (1000000000) to it.
2. The worker executes the heavy computation in the background without blocking the main thread.
3. The main thread remains responsive, allowing other tasks (e.g., UI interactions) to proceed smoothly.
4. Once the worker completes the computation, it sends the result back to the main thread.

Key Characteristics of Web Workers:

• Background Execution: Web Workers operate on a separate thread from the main JavaScript execution thread, allowing them to perform tasks without blocking or slowing down the user interface.
• No Direct DOM Access: Due to their operation in a separate thread, Web Workers do not have direct access to the Document Object Model (DOM). They communicate with the main thread through message passing, ensuring a clear separation between background processing and UI updates.
• Use Cases: Web Workers are particularly useful for handling computationally expensive tasks, such as large data processing or complex calculations, that would otherwise make the web page unresponsive if executed on the main thread.

By integrating Web Workers into your applications, you can enhance the user experience and prevent common performance bottlenecks in JavaScript.

Conclusion

Web Workers solve JavaScript’s single-threaded limitation by enabling background execution of computationally expensive tasks. This allows web applications to remain fast, responsive, and efficient even when handling heavy workloads. While Web Workers do not have access to the DOM, they provide a powerful tool for improving performance in JavaScript applications.

Further Reading

• MDN Web Workers Documentation

If you found this guide useful, share it with fellow developers and start implementing Web Workers in your projects today!

Related Posts

You Guys are getting paid in Tech? – Here’s why you’re not getting paid enough

Learn how to run LLM on Your Local Machine using Ollama

Just Finished Your Tech Course? Here’s How to Start Earning with your New Skill.