Web worker in javascript ?

Web worker in long run brings the multithreading to the javascript. When executing any complex script in html page, the page became unresponsive . To solve this problem web-worker comes in action. In web workers we are creating new child thread. 

Note : Actually we are creating the new child process and then a new thread gets spawned inside it

Web worker is script (another thread) running in the background without the main page needs to wait for it to gets completed

A user can still interact with the web page and web worker will run in the background.

Example :

<!DOCTYPE html>
<html>
<body>
<p>
The count is <span id=”showi”></span>
</p>
<p>
<button onclick=”startWorker()”>Start Worker</button><br>
<button onclick=”stopWorker()”>Stop Worker</button>
</p>
</body>
<script>
var w;
function startWorker(){

if(typeof(Worker) !== ‘undefined’)
{
if(typeof(w) == ‘undefined’)
{
w = new Worker(‘./web_worker.js’);
}
w.onmessage = function(event){
document.getElementById(‘showi’).innerHTML = event.data;
}
}
else
{
alert(‘Web worker not present’);
}
}

function stopWorker(){
w.terminate();
}

</script>
</html>

Now let us define web_worker.js file :

var i = 0;

function timedCount() {
i = i + 1;
postMessage(i);
setTimeout(“timedCount()”,500);
}

timedCount();

 

Problem of handling the complex script in web browser (main thread/thread for html browser)

Example :

<html>
<head>
<script>
function calculate() {
console.log(“Inside complex js”);
vars = 0;
for (vari = 1; i <= 4000000000; i++) {
s = s + i;
}
document.getElementById(“cal”).innerHTML=s+””;
}
function myAlert() {
alert(“Main thread is healthy!”);
}
</script>
</head>
<body>
The calculation is : <span id=”cal”></span>
<hr/>
<button onclick=”myAlert()”>Alert Now</button> |
<button onclick=”calculate()”>Calculate Complex</button>
</body>
</html>
Above example , we have 2 buttons . Once we click on the Calculate Complex button , whole web page gets hangout. Until the long calculation inside the function calculate()  function not completed , the page will remain unresponsive
Solution through web workers

 

We can use web worker. In this we can assign the complex calculation task to web worker thread

Example

index.html (Inside this html we will create the web worker object)

<html>
<head>
<script>
var w;
function startWorker(){
if (typeof(Worker) !== “undefined”) {
console.log(“Browser support the web worker”);
if (typeof(w) === “undefined”) {
w = newWorker(“complex.js”);
w.onmessage = function (res) {
document.getElementById(“cal”).innerHTML = res.data;
};
}
} else {
console.log(“Browser do not support the web worker”);
}
}
function myAlert() {
alert(“Main thread is healthy!”);
}
</script>
</head>
<body>
The calculation is : <span id=”cal”></span>
<hr/>
<button onclick=”myAlert()”>Alert Now</button> |
<button onclick=”startWorker()”>Calculate Complex </button>
</body>
</html>
complex.js
function calculate() {
console.log(“Inside complex js”);
vars = 0;
for (vari = 1; i <= 4000000000; i++) {
s = s + i;
}
postMessage(s);
}
calculate();

 

By Pankaj Kumar Agarwal

Leave a reply:

Site Footer