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:
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
if (window.Worker){
var worker = new Worker( 'worker.js' );
var message = 'Hello' ;
worker.postMessage(message);
worker.onmessage = function (e) {
console.log(e.data);
};
}
self.onmessage = function (e) {
if (e.data !== undefined) {
var total = e.data + ' World' ;
self.postMessage(total)
}
}
|
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.
const delay = 5000;
const noWorkerBtn = document.getElementById( 'worker--without' );
noWorkerBtn.addEventListener( 'click' , () => {
const start = performance.now();
while (performance.now() - start < delay);
const end = performance.now();
const resWithoutWorker = end - start;
console.log( 'No worker:' , resWithoutWorker);
});
const worker = new Worker( './worker.js' );
const workerBtn = document.getElementById( 'worker--with' );
workerBtn.addEventListener( 'click' , () => {
worker.postMessage(delay);
});
worker.onmessage = e => {
console.log( "With worker: " , e.data);
};
this .onmessage = e => {
const delay = e.data;
const start = performance.now();
while (performance.now() - start < delay);
const end = performance.now();
const resWithWorker = end - start;
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
Last Updated :
04 Jun, 2019
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...