HTML5 Web Workers

A web worker is a JavaScript code that runs in the background of the web page.

What is Web Workers

If you try to do intensive task with JavaScript that is time-consuming and require hefty calculations it will freeze up the web page and interrupt the user until the job is completed. It happens because JavaScript code always runs in the foreground.

HTML5 introduces a new technology called Web worker that is specifically designed to do background work independently of other user-interface scripts, without affecting the performance of the page. Unlike JavaScript the Web worker doesn't interrupt the user and the web page remain responsive because they are running tasks in the background.

 

Tip:The HTML5's web worker feature is supported in all major modern browsers like Firefox, Chrome, Opera, Safari and Internet Explorer 10+.


Create a Web Worker File

The simplest use of web workers is for performing a time-consuming task. So here we are going to create a simple JavaScript task that counts from zero to 100,000. Let's create an external JavaScript file named "worker.js" and type the following code.

Example

Download
  • var i = 0;
  • function countNumbers(){
  •     if(i < 100000){
  •         i = i + 1;
  •         postMessage(i);
  •     }
  •  
  •     // Wait for sometime before running this script again
  •     setTimeout("countNumbers()", 500);
  • }
  • countNumbers();
 

Note:The postMessage() method is used to send a message (like the numbers in the example above) back to the web page from the web worker file.


Doing Work in the Background with Web Worker

Now that we have created our web worker file. In this section we are going to initiate the web worker from an HTML document that runs the code inside the file named "worker.js" in the background and progressively displays the result on the web page.

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <title>HTML5 Web Worker</title>
  • <script type="text/javascript">
  •     if(window.Worker){
  •         // Set up global variable
  •         var worker;
  •       
  •         // Create a new web worker
  •         worker = new Worker("worker.js");
  •         
  •         // Fire onMessage event handler
  •         worker.onmessage = function(event){
  •             document.getElementById("result").innerHTML = event.data;
  •         };
  •     } else{
  •         alert("Sorry, your browser do not support web worker.");
  •     }
  • </script>
  • </head>
  • <body>
  •     <div id="result">
  •         <!--Received messages will be inserted here-->
  •     </div>
  • </body>
  • </html>

Example explained:

The JavaScript code in the above example has the following meaning:

  • The statement var worker = new Worker("worker.js"); creates a new web worker object, which is used to communicate with the web worker.
  • When the worker posts a message, it fires the onmessage event handler that allows the code to receive messages from the web worker.
  • The event.data element contains the message sent from the web worker.
 

Note:The code that a worker runs is always stored in a separate JavaScript file. This is to prevent web developer from writing the web worker code that attempts to use global variables or directly access elements on the page.


Terminate a Web Worker

So far you have learnt how to create worker and start receiving messages. However, you can also terminate a running worker in the middle of a calculation.

The following example will show you how to start and stop worker from a web page through clicking the HTML buttons. It utilizes the same JavaScript file 'worker.js' what we have used in the previous example to count the numbers from zero to 100000.

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <title>HTML5 Web Worker</title>
  • <script type="text/javascript">
  •     // Set up global variable
  •     var worker;
  •     
  •     function startWorker(){
  •         // Initialize web worker
  •         worker = new Worker("worker.js");
  •         
  •         // Run update function, when we get a message from worker
  •         worker.onmessage = update;
  •         
  •         // Tell worker to get started
  •         worker.postMessage("start");
  •     }
  •     
  •     function update(event){
  •         // Update the page with current message from worker
  •         document.getElementById("result").innerHTML = event.data;
  •     }
  •     
  •     function stopWorker(){
  •         // Stop the worker
  •         worker.terminate();
  •     }
  • </script>
  • </head>
  • <body>
  •     <h1>Web Worker Demo</h1>
  •     <button onclick="startWorker();" type="button">Start web worker</button>
  •     <button type="button" onclick="stopWorker();">Stop web worker</button>
  •     <div id="result">
  •         <!--Received messages will be inserted here-->
  •     </div>
  • </body>
  • </html>
 

Tip:Use web worker for performing only heavy-weight JavaScript tasks that do not interrupt the user-interface scripts (i.e. scripts that respond to clicks or other user interactions). It's not recommended to use web workers for short tasks.

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.