What Is a Web Worker and How Do You Use It?

To fully understand what a Web Worker is, we first need to understand how Javascript uses your central processor's computing power.

Your CPU (Central Processing Unit) is the integrated circuit in your machine that performs all the calculations and operations requested by the system, applications, and others.

With the exception of graphics rendering calculations, which are partly delegated to your GPU, also called the graphics card.

A CPU is broken down into several cores (in most cases) that will each work simultaneously but physically independently, as if your machine were equipped with several separate processors.

Each core will then split its computation flows into different threads: a thread is a sequence of instructions that can be executed independently from the rest in a logical (rather than physical) sense.

Javascript is a "single-threaded" language, meaning it uses only one single thread for its entire execution (its event loop and its memory stack), which means that if we run a resource-intensive calculation, the entire application risks becoming unresponsive for a while, until the browser offers you the option to stop the blocking script.

But fortunately, web workers are here to solve this problem!

Explanations

A worker is therefore a script that the browser will execute in a thread separate from the main thread (which manages the Javascript application as well as the page's UI) in order to preserve all of the page's performance.

Since the worker operates in a separate environment, it cannot communicate directly with the Javascript application, and all communications must therefore go through events.

It's important to understand that the worker has no access to the page and is solely dedicated to computation, input/output (I/O) management, or data processing outside of any graphical interaction.

For example, the global window variable will never be accessible from a worker, but the XMLHTTPRequest Web API remains accessible.

For more detailed information, I recommend checking out the documentation on the Mozilla website

Now let's move on to practice with an example!

In practice

We're going to discover how to create a web worker and how to manage communication between the worker and the main script, and you'll see that the process is very simple.

Creating the web worker

//main.js

/* Checks if Web Worker feature is available */
if (window.Worker) {
  /* Loads the dedicated script into a new thread */
  let myWorker = new Worker('worker.js');
  //...
} else {
  alert("Web Worker not available");
}

Communicating with the web worker

All communication works through events, whether it's for sending data or asking the worker to perform a specific task.

//main.js

/* After myWorker is initialized we start listening to any data coming from the worker */

myWorker.onmessage = function(e) {
  console.log('Message received from worker:',e.data;);
}

/* To pass data/instructions to the worker, simply do */
myWorker.postMessage("do_something");

//worker.js

onmessage = function(e) {
  console.log('Message received from main script:', e.data);
}

/* Following message will be sent as soon as the worker is started */
postMessage("worker_initialized");

Closing the web worker

Once you're done using your web worker, you can terminate its execution by calling the following method:

myWorker.terminate();

A concrete example

If you need a concrete example to fully understand the usefulness of web workers, I've prepared a Github repository with an online demo for you.

This demo consists of a simple but heavily implemented calculation, runnable with or without a web worker so you can clearly see the difference: https://nicolasbrondin.github.io/basic-web-worker-extension/

Feel free to reuse the source code to implement your own worker in a simple way!

I hope this article was useful to you, and see you soon on the blog.