Web Workers in Javascript
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:
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 page
self.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:
However, the do have access to:
Common use cases:
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 button
const noWorkerBtn = document.getElementById('worker--without');
// Add event listener to the button itself
noWorkerBtn.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 worker
const worker = new Worker('./worker.js');
// Get element of with worker button
const workerBtn = document.getElementById('worker--with');
// Add event listener to the button
workerBtn.addEventListener('click', () => {
// Send delay number
worker.postMessage(delay);
});
// On message from worker
worker.onmessage = e => {
// Log the result
console.log("With worker: ", e.data);
};
/* -----------------------------Worker.JS--------------------------*/
// On message received
this.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:
That’s how the page behaves with our worker code:
