HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
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 versions that fully support Web Workers:
Chrome 4 | IE 10 | Firefox 3.5 | Safari 4 | Opera 11.5 |
Jan 2010 | Sep 2012 | Jun 2009 | Jun 2009 | Jun 2011 |
The example below creates a simple web worker that count numbers in the background:
Before creating a web worker, check whether the user's browser supports it:
Now, let's create our web worker in an external JavaScript.
Here, we create a script that counts. The script is stored in the "demo_workers.js" file:
The important part of the code above is the postMessage()
method - which is used to post a message back to the HTML page.
Now that we have the web worker file, we need to call it from an HTML page.
The following lines checks if the worker already exists, if not - it creates a new web worker object and runs the code in "demo_workers.js":
Then we can send and receive messages from the web worker.
Add an "onmessage" event listener to the web worker.
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.
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:
If you set the worker variable to undefined, after it has been terminated, you can reuse the code:
We have already seen the Worker code in the .js file. Below is the code for the HTML page:
<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<script>
let w;
function startWorker()
{
if (typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
w.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
}
function stopWorker()
{
w.terminate();
w = undefined;
}
</script>
</body>
</html>
Since web workers are in external files, they do not have access to the following JavaScript objects: