HTML5 Web Workers

The Web Workers are the separate JavaScript code which runs in the background of the web page without affecting the user Interface.

What is Web Worker?

Everyone wants a website or application which work fast and can execute multiple operations simultaneously without affecting the performance of the page. However, sometimes we experience some delay response or degraded performance of page while executing some large operations. So this problem can be solved using the Web Workers.

Web Workers are the multithreaded object which can execute multiple JavaScript in parallel without affecting the performance of the application or webpage.

Following are some key features of the Web Workers:

Web-workers are threaded JavaScript.
Web-workers are the kernel-level thread.
Web-workers requires more space and CPU time.
Web-workers enhances the speed of a website.
Web-worker executes codes on the client side (not server-side).
Web worker threads communicate with each other using postMessage() callback method

Tips: Before working with HTML Web Workers you must have knowledge of JavaScript as the Web Worker depends on JavaScript.

Types of Web Workers:

In HTML5 Web Workers are of two types:

Dedicated Web Workers:

The dedicated worker can be accessed by only one script which has called it. The dedicated worker thread end as its parent thread ends. Dedicated workers are only used by one or single main thread.

Shared Web Workers:

It can be shared by multiple scripts and can communicate using the port. Shared workers can be accessed by different windows, iframes or workers.

Note: In this section, we will use dedicated Web Workers.

Web Workers Browser Support:

Before learning the web Workers first, we need to check about the browser support. So following is the code which checks whether your browser is supporting or not.

Example

<!DOCTYPE html>
<html>
<head>
  <title>Web Worker API</title>
</head>
<body>
<h2>Example to check the browser support of Web Workers</h2>
<div id="supported"></div>
<div id="unsupported"></div>
<button onclick="worker();">click me</button>
<script type="text/javascript">
   function worker() 
   {
    if(typeof(Worker)!=="undefined"){
     document.getElementById("supported").innerHTML="Supporting the browser";
      }
     else
      {
      document.getElementById("unsupported").innerHTML="Not supporting";}
   }
</script>
</body>
</html>

Test it Now

Creation of Web worker file:

To create a Web Worker file we need to create an external JavaScript file.

Here we have created a web worker file for calculating the square of the number. And saved it with the name "worker.js".

Below is the code for worker.js file.

onmessage =function(event){
var num= event.data;
var sqr=num*num;
var result="";
for(var i=1;i<=sqr; i++)
{
result= "Sqaure result is:"+ " "+i;
}
postMessage(result);
}

Creating the Web Worker Object:

In above "worker.js" file, we have created the JS file for web Worker now it needs to call on an HTML file. To create the web worker object, you need to call the Worker() constructor.

Following is the syntax to call and create the object of Web Worker:

Sending messages between the Worker thread and main thread:

All the communication of Worker thread depends on the postMessage() method and onmessage event handler.

Terminating the Web Worker:

If you want to immediately terminate the currently running worker in the main thread, then you can terminate it by calling the terminate() method of Web Worker. Here is the syntax for web worker termination:

Web Worker can be terminate in worker thread also by calling the close() method.

Example

<!DOCTYPE html>
<html>
<head>
  <style>
    .div1{
      margin-left: 350px;
    }
  </style>
</head>
<body>
<!-- Sqaure Output Result -->
<div class="div1">
  <h2>Example of Web Worker</h2>
<label>Enter the number to find the square</label>
<br><input type="text" name="num" id="num"><br>
<br><button id="submit">Submit</button>
<button id="other">Wait</button>
<div id="text"></div>
</div>
<script type="text/javascript">

document.getElementById("other").onclick=function() {
  alert("Hey! Web Worker is working, and you can wait for the result.");
}

//Web-worker Code.....
  var worker= new Worker("worker.js");
  worker.onmessage= function(event){
  document.getElementById("text").innerText= event.data;}
  document.getElementById("submit").onclick= function(){
  var num= document.getElementById("num").value;
  worker.postMessage(num);
 }
</script>
<p><b>Note:Try to enter a big number, and then click on other button. The page will respond properly</b></p>
</body>
</html>

Test it Now

Worker.js file:

onmessage=function(event){
var num= event.data;
var sqr=num*num;
var result="";
for(var i=1;i<=sqr; i++)
{
result= "Sqaure result is:"+ " "+i;
}
postMessage(result);
}

Example Explanation:

In the above example in HTML file we have used

var worker= new Worker("worker.js"); To create the web Worker object.
worker.onmessage= function(event): It is used to send the message between the main thread and Worker thread.
worker.postMessage(num); This is the method used to communicate between the Worker thread and main thread. Using this method Worker thread return the result to the main thread.