One of the interesting and useful additions to the HTML5 standards is the support for Web Workers. Web Workers will help you design more responsive web applications then otherwise possible in the past.
What are Web Workers
Web Workers are basically a API specification that lets you create background JavaScript threads to process CPU intensive tasks. Normally in browsers a single thread is created to handle all the JavaScript code. So whatever JavaScript code is run in the browser is executed in that single thread; whether you are doing some calculation or updating page elements. The downside of this is that some CPU intensive piece of JavaScript can render the page unresponsive or slow it to a crawl.
Web Workers alleviate this problem by letting you create multiple JavaScript threads that will run independent of each other, this will prevent one CPU intensive piece of JavaScript from interfering with the UI code.
Checking Web Worker support
Before you create any Web Worker related code you will need to find if your browser supports HTML5 Web Workers. Failure to do this will send your Web Workers to slog in Never Never Land. The following code will allow you to check if your browser supports Web Workers.
/* Check if Web Workers are supported */
function getWebWorkerSupport() {
return (typeof(Worker) !== "undefined") ? true:false;
}
Creating a simple Worker
Once we have checked that Workers are supported in the browser we are ready to put them to task. In this example we will create a simple Web Worker that will ‘Add’ or ‘Multiply’ two numbers. The example is deliberately kept simple to keep the discussion focused on Worker details; in reality you would not use Workers for such simple things, but for more elaborate and CPU intensive tasks. Below is a small piece of JavaScript code that does the actual arithmetic calculation. This our Worker. It is stored in the ‘arithmetic.js’ file.
/* arithmetic.js */
function addNumbers(x,y) {
return x + y;
}
function mulNumbers(x,y) {
return x*y;
}
/*
Add a event listener to the worker, this will
be called when the worker receives a message
from the main page.
*/
this.onmessage = function (event) {
var data = event.data;
switch(data.op) {
case 'mult':
postMessage(mulNumbers(data.x, data.y));
break;
case 'add':
postMessage(addNumbers(data.x, data.y));
break;
default:
postMessage("Wrong operation specified");
}
};
Now that we have or Worker file ready we need to call it from our main file.
The following line will create a new Worker thread and run the code stored in ‘arithmetic.js’.
/* Create a new worker */
arithmeticWorker = new Worker("arithmetic.js");
Once we have created Workers we need to send and receive messages from them. For that we need to add a event handler to the main calling code.
/*
Add a event listener to the worker, this will
be called whenever the worker posts any message.
*/
arithmeticWorker.onmessage = function (event) {
document.getElementById("output").value = event.data;
};
Now whenever a Worker posts a message the ‘onmessage’ event is fired and the code within it is executed. The data passed by the Worker is stored in the event.data container. We have seen how to receive a message from the Worker but how to we post one. Posting a message to the Worker is very simple.
/* Message sent by the main page to the Worker. */
arithmeticWorker.postMessage('Main says...');
The message can be a simple variable or a JSON object. The same event management applies to the Worker file. Whenever the main page posts a message to the Worker the Worker can receive the message in a ‘onmessage’ event handler, at the same time the Worker can post a message to the main page with the ‘postMessage’ method.
/* Message sent by a Worker to the main page. */
postMessage('Worker says...');
We have already seen the Worker code. Below is the code for the main file.