HTML Web Workers

Web workers are JavaScript running in the background and will not affect the performance of the page.

What is Web Worker?

When executing scripts in an HTML page, the page is unresponsive until the script is completed.

Web workers are JavaScript running in the background, independent of other scripts, and will not affect the performance of the page. You can continue to do anything you want: click, select content, etc., while the web worker runs in the background.

Browser Support

The numbers in the table indicate the first browser version that fully supports Web Worker.

API
Web Worker 4.0 10.0 3.5 4.0 11.5

HTML Web Workers Example

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

Count:

Try It Yourself

Check Web Worker Support

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

if (typeof(Worker) !== "undefined") {
    // Yes! Web worker is supported!
    // Some code.....
}
    // Sorry! Web Worker is not supported!
}

Create Web Worker File

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

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

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

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

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

Create Web Worker Object

Now that we have the web worker file, we need to call it from the HTML page.

The following code line checks for the existence of the worker. If it does not exist, it will create a new web worker object and then run 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;
};

When a web worker sends a message, the code in the event listener is executed. Data from the web worker is stored in event.data.

Terminate Web Worker

After creating a web worker, it will continue to listen for messages (even after the external script is completed) until it is terminated.

To terminate a web worker and release browser/computer resources, use the terminate() method:

w.terminate();

Reuse Web Worker

If you set the worker variable to undefined, you can reuse the code after it is terminated:

w = undefined;

Complete Web Worker Example Code

We have seen the Worker code in the .js file. Below is the code for the HTML page:

Example

<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button> 
<button onclick="stopWorker()">Stop Worker</button>
<br><br>
<script>
var w;
function startWorker() {
    if(typeof(Worker) !== "undefined") {
        if(typeof(w) == "undefined") {
            w = new Worker("demo_workers.js");
        }
        w.onmessage = function(event) {
            document.getElementById("result").innerHTML = event.data;
        };
    }
        document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
    }
}
function stopWorker() { 
    w.terminate();
    w = undefined;
}
</script>
</body>
</html>

Try It Yourself

Web Workers and DOM

Since web workers are located in external files, they cannot access the following JavaScript objects:

  • window Object
  • document Object
  • parent Object