What is a Web Worker in JavaScript?

In this tutorial, we are going to see What is a Web Worker in JavaScript?

Web Worker allows us to launch huge calculations in Javascript without crashing the browser.

To fully understand what a Web Worker is, you must first understand how Javascript uses the computing capacity of your central processing unit.

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

A CPU is decomposed into several cores that will each work simultaneously but physically independently as if your machine were equipped with several distinct processors.

Each core will then split its computational flow into different threads: a thread is a sequence of instructions that can be executed independently from the rest in a logical (and not physical) way.
 

 
Javascript is a “single-threaded” language, meaning that it uses only one thread for all its execution, which means that if you execute a calculation that takes a lot of resources, the whole application may not respond for a while until the browser suggests you stop the blocking script.

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

What is a Web Worker?

A worker is a script that the browser will execute in a separate thread from the main thread (managing the Javascript application as well as the UI of the page) in order to keep all the performances of the page.

As the worker works in a separate environment, it cannot communicate directly with the Javascript application and all communications will have to go through events.

It is important to understand that the worker does not have access to the page and is only dedicated to computation, I/O management, or data processing without any graphical interaction.

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

 

Example: How to create and manage the communication between web workers?

We are going to see how to create a web worker and how to manage the communication between the worker.
 

Creation of a web worker

File: main.js

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

 

Communication with web worker

All communication is event-driven, whether it is to send data or to ask the worker to perform a specific task.
 
File: main.js

/* After we initialize myWorker we listen to any data coming from the worker */

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

/* Transmit data to the worker */
myWorker.postMessage("run_something");

 

 
File: worker.js

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

/* This message will be sent once the worker is started */
postMessage("worker_initialized");

 

Closing the web worker:

If you have finished using your web worker, you can terminate its execution by calling the following method:

myWorker.terminate();

That’s all!
 

MCQPractice competitive and technical Multiple Choice Questions and Answers (MCQs) with simple and logical explanations to prepare for tests and interviews.Read More