A web worker is known as a JavaScript that is running in the background, without affecting the page performance.
What is a Web Worker?
while executing scripts in an HTML page, the page will become unresponsive until the script gets finished.
A web worker is known to a a JavaScript which runs in the background, independent with respect to other scripts, without affecting the page performance. You are allowed to do whatever you want: clicking, selecting things, etc., when the web worker is running in the background.
Browser Support
The table numbers specify the first browser version which fully support Web Workers.
| API | |||||
|---|---|---|---|---|---|
| Web Workers | 4.0 | 10.0 | 3.5 | 4.0 | 11.5 |
HTML Web Workers Example
The example below will show you how to create a simple web worker which counts numbers in the background:
Check Web Worker Support
Before creation of a web worker, we need to check whether the user's browser is supporting it:
if (typeof(Worker) !== "undefined") {
// Yes! Web worker support!
// Some code.....
}
else {
// Sorry! No Web Worker support..
}
Create a Web Worker File
Now, we will be creatinge web worker in an external JavaScript.
Here, we are creating a script which counts. The script will get stored in the "demo_workers.js" file:
var i = 0;
function timedCount()
{
i = i + 1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
The notable part of the code above is the postMessage() method - which posts a message back to the HTML page.
Note: Usually web workers are used for CPU intensive tasks and not for such simple tasks.
Create a Web Worker Object
Now we are having the web worker file which needs to be called from an HTML page.
The following lines are checking if the worker already exists, if not - it will create a new web worker object and will run the code in "demo_workers.js":
if (typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
Throught the web workers we can be sending and receiveing messages .
Adding an "onmessage" event listener to the web worker.
w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};
When the web worker is posting a message, the code inside the event listener is executed. The data received from the web worker is stored in event.data.
Terminate a Web Worker
When a web worker object gets created, it will be working continously to listen for messages (even after the external script gets over) until the script gets terminated.
For terminating a web worker, and free browser/computer resources, use the terminate() method:
w.terminate();
Reuse the Web Worker
If you are setting up the worker variable to be undefined, after it is terminated, you can reuse the code:
w = undefined;
Full Web Worker Example Code
We have already looked into the Worker code in the .js file. Below is the code written 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("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 present in external files, they will not be having access to the following JavaScript objects: