HTML5 Web Workers

A web worker is known as a JavaScript that is running in the background, without affecting the page performance.

What is a Web Worker?


while executing scripts in an HTML page, the page will become unresponsive until the script gets finished.

A web worker is known to a a JavaScript which runs in the background, independent with respect to other scripts, without affecting the page performance. You are allowed to do whatever you want: clicking, selecting things, etc., when the web worker is running in the background.

Browser Support


The table numbers specify the first browser version which fully support Web Workers.

Web Workers 4.0 10.0 3.5 4.0 11.5

HTML Web Workers Example


The example below will show you how to create a simple web worker which counts numbers in the background:


Count numbers:

Try it Yourself

Check Web Worker Support


Before creation of a web worker, we need to check whether the user's browser is supporting it:

if (typeof(Worker) !== "undefined") {
    // Yes! Web worker support!
    // Some code.....
} else {
    // Sorry! No Web Worker support..

Create a Web Worker File


Now, we will be creatinge web worker in an external JavaScript.

Here, we are creating a script which counts. The script will get stored in the "demo_workers.js" file:

var i = 0;

function timedCount() {
    i = i + 1;


The notable part of the code above is the postMessage() method - which posts a message back to the HTML page.

Note: Usually web workers are used for CPU intensive tasks and not for such simple tasks.

Create a Web Worker Object


Now we are having the web worker file which needs to be called from an HTML page.

The following lines are checking if the worker already exists, if not - it will create a new web worker object and will run the code in "demo_workers.js":

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

Throught the web workers we can be sending and receiveing messages .

Adding an "onmessage" event listener to the web worker.

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

When the web worker is posting a message, the code inside the event listener is executed. The data received from the web worker is stored in event.data.

Terminate a Web Worker


When a web worker object gets created, it will be working continously to listen for messages (even after the external script gets over) until the script gets terminated.

For terminating a web worker, and free browser/computer resources, use the terminate() method:


Reuse the Web Worker


If you are setting up the worker variable to be undefined, after it is terminated, you can reuse the code:

w = undefined;

Full Web Worker Example Code


We have already looked into the Worker code in the .js file. Below is the code written for the HTML page:


<!DOCTYPE html>

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>

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;
    } else {
        document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";

function stopWorker() {
    w = undefined;

Try it Yourself

Web Workers and the DOM


Since web workers are present in external files, they will not be having access to the following JavaScript objects: