HTML5 Web Workers

A web laborer is a JavaScript running out of sight, without influencing the execution of the page.

What is a Web Worker?

When executing contents in a HTML page, the page winds up lethargic until the content is finished.

A web specialist is a JavaScript that keeps running out of sight, autonomously of different contents, without influencing the execution of the page. You can keep on doing anything you desire: clicking, choosing things, and so forth., while the web specialist keeps running in the background.

Browser Support

The numbers in the table indicate the principal program form that completely bolster Web Workers.

Web Workers 4.0 10.0 3.5 4.0 11.5

HTML Web Workers Example

The model underneath makes a basic web specialist that include numbers in the background:


Tally numbers:

Try it yourself »

Check Web Worker Support

Before making a web specialist, check whether the client's program underpins it:

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

Create a Web Worker File

Now, how about we make our web laborer in an outer JavaScript.

Here, we make a content that matters. The content is put away in the "demo_workers.js" file:

var I = 0;

work timedCount() {
    I = I + 1;


The vital piece of the code above is the postMessage() strategy - which is utilized to present a message back on the HTML page.

Note: Normally web specialists are not utilized for such basic contents, however for more CPU serious tasks.

Create a Web Worker Object

Now that we have the web specialist record, we have to call it from a HTML page.

The following lines checks if the laborer as of now exists, if not - it makes another web specialist item and runs the code in "demo_workers.js":

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

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

Add a "onmessage" occasion audience to the web worker.

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

When the web laborer posts a message, the code inside the occasion audience is executed. The information from the web laborer is put away in event.data.

Terminate a Web Worker

When a web laborer object is made, it will keep on tuning in for messages (even after the outer content is done) until it is terminated.

To end a web specialist, and free program/PC assets, utilize the end() method:


Reuse the Web Worker

If you set the specialist variable to indistinct, after it has been ended, you can reuse the code:

w = undefined;

Full Web Worker Example Code

We have just observed the Worker code in the .js document. The following is the code 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;

work 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.";

work stopWorker() {
    w = undefined;

Try it yourself »

Web Workers and the DOM

web specialists and DOM the accompanying JavaScript objects:

  • The report object
  • The parent object
  • The window object