HTML5 Web Workers

by

A separate JavaScript code that runs in the background of a web page is called the Web Workers in HTML. It does not affect the user interface. They are the multithreaded object. Multiple JavaScript is executed in parallel but the performance of the application or webpage is not affected.

Key features of the Web Workers:

The key features of the web workers in HTML are:

  • They are the threaded JavaScript.
  • They are the kernel-level thread.
  • More space and CPU time is required.
  • The speed of the website is enhanced.
  • Codes are executed on the client side and not on the server side.
  • They use the postMessage() callback method to communicate with each other.

Types of Web Workers:

There are two types of Web workers in HTML 5:

Dedicated Web Workers:

Only one script can access a dedicated worker, the one that has called it. As the parent thread ends the dedicated worker thread ends. Only one or a single main thread can use the dedicated workers.

Shared Web Workers:

Multiple scripts can share a Shared Web Worker and can communicate using the port. Different windows, iframes, or workers can access the Shared workers.

Web Workers Browser Support:

To check the web workers’ browser support execute the below code:

<!DOCTYPE html>  
<html>    
<body>  
<h2>Check the browser support of Web Workers.</h2>  
<div id="yes"></div>  
<div id="no"></div>  
<button onclick="worker();">click me</button>  
<script type="text/javascript">  
   function worker()   
   {  
    if(typeof(Worker)!=="undefined"){  
     document.getElementById("yes").innerHTML="Supported!!";  
      }  
     else  
      {  
      document.getElementById("no").innerHTML="Not supported!!";}  
   }  
</script>  
</body>  
</html>

Explanation:

In the above example, we are checking the browser support for the HTML web workers.

To create a Web worker file:

Create an external JavaScript file, to create a Web worker file.

Example:
Example.js

var i = 0;
function Counting() {
  i = i + 1;
  postMessage(i);
  setTimeout("Counting()",500);
}
timedCount();

Explanation:

In the above example, we created a javascript file to create a web worker file for calculating the cube of a number.

To create a Web Worker Object:

The Worker() constructor needs to be called to create a web worker object.

Syntax:

var worker= new Worker('example.js');

To send messages between the Worker thread and the main thread:

The postMessage() method and onmessage event handler are used for all the communication of the Worker thread.

Terminating the Web Worker:

To immediately terminate the currently running worker in the main thread, the terminate() method is called. To terminate the Web Worker in the worker thread, the close() method can also be called.

Syntax:

worker.terminate();

Example: Web Worker Example.

<!DOCTYPE html>
<html>
<body>
 
<p>Counting: <output id="result"></output></p>
<button onclick="start()">Start</button> 
<button onclick="stop()">Stop</button>
<script>
var n;
 
function start() {
  if(typeof(Worker) !== "undefined") {
    if(typeof(n) == "undefined") {
      n = new Worker("example.js");
    }
    n.onmessage = function(event) {
      document.getElementById("result").innerHTML = event.data;
    };
  } else {
    document.getElementById("result").innerHTML = "Web Worker is not supported.";
  }
}
 
function stop() { 
  n.terminate();
  n = undefined;
}
</script>
</body>
</html>


example.js file:


var i = 0;
function Counting() {
  i = i + 1;
  postMessage(i);
  setTimeout("Counting()", 500);
}
timedCount();


Explanation:


In the above example, the n = new Worker(“example.js”) is used to create the web Worker object. The n.onmessage = function(event) is used to send a message between the main thread and the worker thread. The n.terminate() is used to terminate the currently running worker in the main thread. The event.data is used to store the data from the web worker. The worker variable after it has been terminated, is set to undefined so that the code can be reused.


Supporting Browsers:


Chrome, IE, Firefox, Opera, and Safari.