Web Worker API

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

What is a 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 Workers:

Chrome IE Firefox Safari Opera
Chrome 4 IE 10 Firefox 3.5 Safari 4 Opera 11.5
January 2010 September 2012 June 2009 June 2009 June 2011

Web Worker Instance

The following example creates a simple Web Worker that calculates numbers in the background:

Example

Count:

Try It Yourself

Check Web Worker Browser

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

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

Create Web Worker File

Now, let's create our Web Worker in the external JavaScript.

Here, we create an important script. This script is stored in the "demo_workers.js" file:

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

The important part of the above code is postMessage() Method - Used to send messages back to the HTML page.

Note:Web workers are usually not used for such simple scripts but for 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 if the worker exists, and if it does not exist, 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;
};

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

When a web worker object is created, it continues 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 terminate() Method:

w.terminate();

Reuse Web Worker

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

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>
<script>
let w;
function startWorker() {
  if (typeof(w) == "undefined") {
    w = new Worker("demo_workers.js");
  }
  w.onmessage = function(event) {
    document.getElementById("result").innerHTML = event.data;
  };
}
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