LERAN HTML COMPLETE

Learn one of the most powerful programming languages in the world and become a rockstar developer.

HTML Web Workers


HTML5 Web Worker

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


What is a Web Worker?

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

A web worker is a JavaScript that runs in the background, independently of other scripts, without affecting the performance of the page. You can continue to do whatever you want: clicking, selecting things, etc., while the web worker runs in the background.

Browser Support

The numbers in the table specify the first browser version that fully supports the <web workers> element.

Browsers Icon

Browsers

  • Firefox
  • Google Chrome
  • Internet Explorer
  • Apple Safari
  • Opera

Basic Support

  • YES
  • YES
  • YES
  • YES
  • YES

Version

  • 3.5
  • 4.0
  • 10.0
  • 4.0
  • 11.5

HTML Web Workers Example

The example below creates a simple web worker that count numbers in the background:

Example

Count numbers: 0

demo_workers.js

var i=0;

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

timedCount();


Full Web Worker Example Code

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

<html>
<body>

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

<script>
      var w;

      function startWorker() {
            if (typeof(Worker) !== "undefined") {
            if (typeof(w) == "undefined") {
            // demo_workers.js code is given above
            w = new Worker("https://adzetech.com/tutorials/html/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.terminate();
      w = undefined;
}
</script>

</body>
</html>

Example explained:

The JavaScript code in the above example has the following meaning:

  • The statement var worker = new Worker("worker.js"); creates a new web worker object, which is used to communicate with the web worker.
  • When the worker posts a message, it fires the onmessage event handler that allows the code to receive messages from the web worker.
  • The event.data element contains the message sent from the web worker.


Terminate a Web Worker

When a web worker object is created, it will continue to listen for messages (even after the external script is finished) until it is terminated.

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

w.terminate();


Reuse the Web Worker

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

w = undefined;


Note: Use web worker for performing only heavy-weight JavaScript tasks that do not interrupt the user-interface scripts (i.e. scripts that respond to clicks or other user interactions). It's not recommended to use web workers for short tasks.

x
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Privacy Policy That's Fine