Working with HTML5 web workers

Reading Time: 2 minutes

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

error

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:

  1. 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.
  2. 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);

3 thoughts on “Working with HTML5 web workers2 min read

Comments are closed.