HTML5 Web Workers

A web worker is JavaScript running in the background, without affecting page performance.

What is a Web Worker?

When a script is executing in an HTML page, the page is not responsive until the script is finished.

A web worker is JavaScript running in the background, independent of other scripts, without affecting page performance. You can continue doing whatever you want: clicking, selecting content, etc., while the web worker runs in the background.

Browser Support

Internet Explorer 10, Firefox, Chrome, Safari, and Opera all support Web Workers.

HTML5 Web Workers Example

The following example creates a simple web worker that counts in the background:

Check if the browser supports Web Worker

Before creating a web worker, check whether the user's browser supports it:

if(typeof(Worker)!=="undefined")
{
    // 是的! Web worker 支持!
    // 一些代码.....
}
else
{
    //抱歉! Web Worker 不支持
}

Create a web worker file

Now, let's create our web worker in an external JavaScript.

Here, we create a counting script. The script is stored in the "demo_workers.js" file:

The important part of the above code is the postMessage() method - it is used to post a message back to the HTML page.

Note:Web workers are usually not used for such simple scripts, but for more CPU-intensive tasks.

Create a Web Worker object

We already have the web worker file, and now we need to call it from an HTML page.

The following code detects whether the worker exists, if not, - it creates a new web worker object and runs the code in "demo_workers.js":

if(typeof(w)=="undefined")
{
    w=new Worker("demo_workers.js");
}

Then we can send and receive messages from the web worker.

Add an "onmessage" event listener to the web worker:

w.onmessage=function(event){
    document.getElementById("result").innerHTML=event.data;
};

w.terminate();