What is web worker ?
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.
In other words, A web worker runs on other thread and computes the result without interrupting the main thread. It introduces concurrency in JavaScript program. web worker helps to run multiple scripts at a time.
Why do we need this ?
You must have seen many times that a JavaScript program takes time to get executed and due to this, the UI freezes, and doesn’t respond. Sometimes it shows a prompt like this
It is very annoying and disappointing as well. To overcome this problem we use web workers. It runs task
Types of web workers
There are 2 types of web workers:
- Dedicated web worker: A dedicated web worker is only accessible by the script that called it. It means a dedicated thread will be assigned to the web worker.
- Shared web worker: these are threads that can be shared between different pages of tabs (they must conform to the same-origin policy) on the same client/browser.
An Example
In this example, a message will be sent to web worker and the web server will send back the length of the message. This is just a small example for demonstrating the working of a web worker.
Index.html: In this file, we have created the HTML part of page. there is a input textbox, a button and a span which shows the length of message.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Web Worker</title>
</head>
<body>
<input id="msg" type="text">
<button id="sendButton"> Send</button>
</body>
</html>
main.js: In this file, we have created the JavaScript part of the page. It checked whether the browser supports the web worker or not. if yes, it creates a web worker.
if(window.Worker){
var webWorker = new Worker("worker.js");
webWorker.onmessage = function(event){
var workerMsg = document.querySelector('#workerMsg');
workerMsg.innerHTML ="The length of message is "+ event.data;
}
var btn = document.querySelector("#sendButton").addEventListener("click",function(){
var value = document.querySelector("#msg").value;
webWorker.postMessage(value);
})
}else{
console.log("Web worker is not supported.")
}
worker.js: In this file, we have added event listener to web worker.
self.addEventListener('message', function(e) {
self.postMessage(e.data.length+"");
}, false);
Reblogged this on malti yadav.