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: