Web Workers in Javascript

04 Jun, 2019
Web workers are giving us the possibility to write multi-threaded Javascript, which does not block the DOM. Even the Asynchronous operations block the DOM to some extent. On the other side, web workers help us solve this problem, escaping the single-threaded environment and reaching a higher performance of our web pages.
In order to use:
Web workers live in their own file (Not interacting with the User Interface)
Functions are Passed By Copy
No global variables are allowed
Implementing Web Workers
/* -----------------------------Index.JS--------------------------*/    // Check if web worker functionality is available for the browser        if(window.Worker){                      // Creating new web worker using constructor            var worker = new Worker('worker.js');                                        var message = 'Hello';                      // Sending the message using postMessage            worker.postMessage(message);                          // On response            worker.onmessage = function(e) {                console.log(e.data);            };                  }    /* -----------------------------Worker.JS--------------------------*/  // Waits for any activity from the pageself.onmessage = function(e) {    if(e.data !== undefined) {        // Do work         var total = e.data + ' World';        // Posting back to the page        self.postMessage(total)    }}// Terminate with: worker.terminate()
In the example above, the worker is doing the work of concatenating the received string with the defined one and sends it back to the main.js file without interrupting the page.
Output :'Hello World'

Web Workers does not have access to:
The Parent Object
The Window Object
The Document Object
The DOM
However, the do have access to:
The location object
The navigator object
XMLHttpRequest
The Application Cache
Spawning other web workers (Stored at the same origin as the parent page)
Importing external script using importScripts()
Common use cases:
When complex computing calculations are required
In HTML5 Games (Higher frame rate)
At any websites containing JavaScript for performance improvement
Real World Example
The following program is written for the reason to show what difference is in the behavior of our page with and without worker.
/* -----------------------------Index.JS--------------------------*/const delay = 5000;  // Get element of without worker buttonconst noWorkerBtn = document.getElementById('worker--without');// Add event listener to the button itselfnoWorkerBtn.addEventListener('click', () => {    // Define the starting time    const start = performance.now();    // Do complex calculations    while (performance.now() - start < delay);    // Get the ending time    const end = performance.now();    // Calculate the difference in time    const resWithoutWorker = end - start;    // Log the result    console.log('No worker:', resWithoutWorker);      });  // Define a workerconst worker = new Worker('./worker.js');  // Get element of with worker buttonconst workerBtn = document.getElementById('worker--with');  // Add event listener to the buttonworkerBtn.addEventListener('click', () => {    // Send delay number    worker.postMessage(delay);      });// On message from workerworker.onmessage = e => {    // Log the result    console.log("With worker: ", e.data);};  /* -----------------------------Worker.JS--------------------------*/  // On message receivedthis.onmessage = e => {    // Delay equals to data received    const delay = e.data;    // Define starting time    const start = performance.now();    // Do the complex calculation    while (performance.now() - start < delay);    // Get ending time    const end = performance.now();    // Calculate difference    const resWithWorker = end - start;    // Send result    this.postMessage(end - start);};
Examples:
Output: 'No worker: 5000'
Output: 'With worker:  5000'

That’s how the page behaves without our worker code:
The animation freezes because the JavaScript is blocking the DOM.
Page behaviour without webworker
That’s how the page behaves with our worker code:
As you can see the animation in the background is not interrupted as our worker does the calculation for us. In this way, we let the DOM thread run independently.
Page behaviour with webworker
JavaScript-Misc
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.