Learn one of the most powerful programming languages in the world and become a rockstar developer.
A web worker is a JavaScript running in the background, without affecting the performance of the page.
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.
The numbers in the table specify the first browser version that fully supports the <web workers>
element.
![]() |
Browsers
|
Basic Support
|
Version
|
The example below creates a simple web worker that count numbers in the background:
Count numbers: 0
var i=0; function timedCount() { i=i+1; postMessage(i); setTimeout("timedCount()", 500); } timedCount();
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>
The JavaScript code in the above example has the following meaning:
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();
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.