Web worker for separate thread in JavaScript

What Web worker is ?

JavaScript is a single-threaded programming language. It would be executed in a single thread only, this is the reason when you use heavy JavaScript code for your application, the UI of application would be blocked because the heavy script uses all CPU with main/single thread.

In a single thread, all the script is executed one by one, If the particular code uses the extensive CPU which means other code can not be executed meanwhile.

As a result, JavaScript application is not able to give the response to user interaction, so It’s pretty bad experience to end user.

Web-worker shines over here, what basically it does is, provide the facility of multi-threading for JavaScript application. So the application can use the heavy code in another thread by using web worker and make free the main thread to respond the user input.

For example, if you run large loop in your JavaScript code, which uses 95% CPU, now suppose user click on a button for any task, then user interface in the browser is not responded, in this case, we can place that heavy code in worker as a separate thread.

So that ”95% CPU consuming code” would be executed in the background with a different thread, and the main thread is available for User Interface.

How to use Web Worker ?

To add the web worker on your page, you could do something like.

 var anyWorker  = new Worker('anyJsFile.js'); 

anyJsFile.js is worker file treated as separate thread, now the worker object is available with anyWorker object,

By using postMessage() method with worker object we can send the data to worker, like

Main.js

// the data should be in object format
var car = {
  model : 'GLA-200',
 color : 'White',
 price : null
}
// the data would pass to the worker
anyWorker.postMessage(car); 

This above code sends the car object to the worker.

This car object can be found at worker file by doing something like
anyJsFile.js

onmessage = function (e){
 var wCar = e.data;
 wCar.price = '$70000';
 wCar.company = 'Mercidies Benz';
 postMessage(wCar);
}

After modified the car object you can pass the modified object by postMessage(wCar) method  to main thread(main.js)

By the following code, you can get that modified data as e.data on main thread with onmessage method

anyWorker.onmessage = function (e){
 // get modified object from worker
 var mcar = e.data; 
 console.log(
 'Car model is ' + mcar.model + '\n' + 
 'Car color is ' + mcar.color + '\n' + 
 'Car price is ' + mcar.price + '\n' + 
 'Car company is ' + mcar.company + '\n' 
 );
}

The below points are worth to read

Same Origin Policy

The worker file and the code for an attempt to using that worker should be placed in same origin policy. Like anyWorker.js and main.js file should be located under same domain like http://javascriptfuture.com

DOM/BOM

The BOM(browser object model) and DOM(document object model) are not available for the web worker.

You can find the working example with Web-worker.