How to process in the background using JavaScript Web Worker

Web Workers allow you to run JavaScript code in the background. This article explains how.

What is a Web Worker?

A Web Worker is a JavaScript thread that runs separately from the browser’s JavaScript engine. 
By using this, you can run code separately from the main thread, leading to improved performance and UI responsiveness.

What is Web Worker?

　A Web Worker is a JavaScript thread that runs separately from the browser’s JavaScript engine . By using a Web Worker, you can run code separately from the main thread, leading to improved performance and UI responsiveness.

　JavaScript typically runs single-threaded. This means that when you run JavaScript code, you have to wait until other code has finished executing. However, by using a Web Worker, you can run code in a separate thread, so you can run other code while JavaScript code is running. This leads to improved performance and UI responsiveness.

　However, since Web Workers run on a separate thread from the main thread, they cannot be accessed from the main thread, so there are limitations to some APIs. For example, Web Workers cannot access the DOM and therefore cannot interact with the UI. Additionally, Web Workers can only run scripts generated from the same origin, so there are no security issues.

How to use Web Workers

To use Web Worker, the following steps are required.

1. Generate Worker object
2. Send/receive messages and notify the Worker object of termination.

1. Generate Worker object

To use Web Worker, you need to create a Worker object. To generate a Worker object, write the code as follows.

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

In the above example, the file worker.js is generated as a Web Worker. The first argument is the path to the JavaScript file to be generated as a Web Worker.

2. Send/receive messages and notify the Worker object of termination.

Worker objects can send and receive messages and receive termination notifications.

Send message

To send a message, use the postMessage method. In the following example, the string “Hello” is sent to the Worker object.

worker.postMessage('Hello');

Receiving messages

To receive a message, use the onmessage event of the Worker object. In the following example, a message received from the Worker object is output to the console.

worker.onmessage = function(event) {
  console.log(event.data);
}

Notice of termination

When processing of a Worker object is complete, it can be terminated by calling the terminate method.

worker.terminate();

These are the basic steps for using Web Worker. By using Web Workers, you can improve browser performance by processing with multiple threads.

However, since Web Workers are executed in a thread separate from the main thread, access from the main thread may be restricted, so it is necessary to use them appropriately.

Explanation using a sample program

Below is a sample program that uses Web Worker to calculate the Fibonacci sequence.

function fib(n) {
  if (n === 0 || n === 1) {
    return n;
  }
  return fib(n - 1) + fib(n - 2);
}

onmessage = function(event) {
  const n = event.data;
  const result = fib(n);
  postMessage(result);
}

This program defines the fib function to compute the Fibonacci sequence. If the argument n is 0 or 1, it returns n as is; otherwise, it calls the fib function recursively to calculate the Fibonacci sequence of n-1 and n-2 and returns the result of adding them together.

In the onmessage event, we receive the numbers sent from the main thread, calculate the Fibonacci sequence with the fib function, and return the result to the main thread in the postMessage method.

Below is an example code that calculates the Fibonacci sequence from the main thread using Web Worker.

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

worker.onmessage = function(event) {
  console.log(event.data);
}

In this program, the file worker.js is generated as a Web Worker and the number 40 is sent using the postMessage method. It then receives the result returned from the Web Worker in the onmessage event and outputs it to the console.

summary

We explained how to run JavaScript code in the background using Web Worker.

By using Web Workers, you can improve browser performance, so it’s useful when you want to speed up the processing of JavaScript code!

By using Web Workers, you can improve the processing speed of JavaScript code, but since they are executed in a thread separate from the main thread, you need to use them appropriately.

Also, note that Web Workers are supported by modern browsers, so they may not work with older browsers. 
When using Web Workers, it is important to understand the restricted APIs and use them appropriately.