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
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.
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 PolicyThat's Fine
