Working with HTML5 web workers
source link: https://blog.knoldus.com/working-with-html5-web-workers/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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);
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK