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, as defined by the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG), is a JavaScript script executed from an HTML page that runs in the background, independently of other user-interface scripts that may also have been executed from the same HTML page. Web workers are often able to utilize multi-core CPUs more effectively.
Overview
As envisioned by WHATWG, web workers are relatively heavy-weight. They are expected to be long-lived, have a high start-up performance cost, and a high per-instance memory cost.
Web workers are not intended or expected to be used in large numbers as they could hog system resources.
Web Workers allow for concurrent execution of the browser threads and one or more JavaScript threads running in the background. The browser which follows a single thread of execution will have to wait on JavaScript programs to finish executing before proceeding and this may take significant time which the programmer may like to hide from the user.
It allows for the browser to continue with normal operation while running the script in the background. The web worker specification is a separate specification from the HTML5 specification and can be used with HTML5.
There are two types of web workers: dedicated and shared workers.
When web workers run in the background, they do not have direct access to the DOM but communicate with the document by message passing. This allows for multi-threaded execution of JavaScript programs.
Browser Support
The numbers in the table specify the first browser version that fully support Web Workers.
| API | |||||
|---|---|---|---|---|---|
| Web Workers | 4.0 | 10.0 | 3.5 | 4.0 | 11.5 |
HTML Web Workers Example
The example below creates a simple web worker that count numbers in the background:
Check Web Worker Support
Before creating a web worker, check whether the user's browser supports it:
if(typeof(Worker) !== "undefined") {
// Yes! Web worker support!
// Some code.....
} else {
// Sorry! No Web Worker support..
}
Create a Web Worker File
Now, let's create our web worker in an external JavaScript.
Here, we create a script that counts. The script is stored in the "/html/demo_workers.js" file:
var i = 0;
function timedCount() {
i = i + 1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
The important part of the code above is the postMessage() method - which is used to post a message back to the HTML page.
Note: Normally web workers are not used for such simple scripts, but for more CPU intensive tasks.
Create a Web Worker Object
Now that we have the web worker file, we need to call it from an HTML page.
The following lines checks if the web worker already exists, if not - it creates a new web worker object and runs the code in "/html/demo_workers.js":
if(typeof(w) == "undefined") {
w = new Worker("/html/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 the web worker posts a message, the code within the event listener is executed. The data from the web worker is stored in event.data.
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 web worker variable to undefined, after it has been terminated, you can reuse the code:
w = undefined;
Full Web Worker Example Code
We have already seen the Web 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>
<br><br>
<script>
var w;
function startWorker() {
if(typeof(Worker) !== "undefined") {
if(typeof(w) == "undefined") {
w = new Worker("/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>
Try it Yourself »Web Workers and the DOM
Since web workers are in external files, they do not have access to the following JavaScript objects:
- The window object
- The document object
- The parent object