HTML Web Worker API is a JavaScript code that runs in the background and does not affect the page performance.
Web Workers
When the <script> or JavaScript code executes then only the page become responsive. A web worker runs in the background independent of the other script without affecting the page performance. Web workers make the page more alive and responsive, it makes sure that a specific JavaScript code gets executed according to the user interaction. To create a worker, we use the
Worker()
constructor and pass a JavaScript file to it. That JavaScript file contains the main code that will run in the background.
Example
Make a counter using worker:
<!DOCTYPE html> <html> <body> <p>Counter: <output id="result"></output></p> <button onclick="start()">Start </button> <button onclick="stop()">Stop </button> <script> var w; function start() { if(typeof(Worker) !== "undefined") { if(typeof(w) == "undefined") { w = new Worker("counter.js"); } w.onmessage = function(event) { document.getElementById("result").innerHTML = event.data; }; } else { document.getElementById("result").innerHTML = "Browser Does not Support"; } } function stop() { w.terminate(); w = undefined; } </script> </body> </html>
#counter.js
var i = 0; function timedCount() { i = i + 1; postMessage(i); setTimeout("timedCount()",500); } timedCount();
<Note>: Before we create a web worker, we should check whether the browser supports it or not.
Create a Web Worker Object:
To create a web worker object, we use the
Worker()
constructor and specify the JavaScript file as a parameter for the thread execution.
w= new Worker("counter.js");
The
counter.js
file contains the code which will process in the background.
var i = 0; function timedCount() { i = i + 1; postMessage(i); setTimeout("timedCount()",500); } timedCount();
Terminate
The web worker object keeps listing the message until it gets terminated. To terminate the worker, we use the terminate() method.
function stop() { w.terminate(); w = undefined; }
Summary
- Web worker is a JavaScript code that runs at the background.
- Web workers are external files so they can not access the window, document and parent objects.
- It is necessary to terminate the worker object.
People are also reading: