Aymen Kareem Aymen Kareem - 26 days ago 5
Javascript Question

Multiple processes are working smoothly so why do we need web worker in javascript?

I am confused with the use and advantages of web workers. I was able to create two buttons that start two counters and the values of both counters are displayed in the screen. Also I created ball movement to create animation. The code is as follows:

<!DOCTYPE html>

<html>
<head>
<style>
@keyframes ballmovement {
0% {
left: 0px;
top: 0px;
background-color: yellow;
}

33% {
margin-left: 100px;
margin-top: 160px;
}

66% {
margin-left: 200px;
margin-top: 0px;
}

100% {
margin-left: 300px;
margin-top: 160px;
background-color: purple;
}
}

.animate {
animation-name: ballmovement;
animation-duration: 3s;
animation-iteration-count: 40;
animation-direction: alternate;
}

#ball {
width: 100px;
height: 100px;
border-width: 2px;
border-color: black;
border-style: solid;
border-radius: 50%;
}
#container {
float: left;
height: 500px;
width: 50%;
}
#bus {
display: inline;
}
</style>
<script>
function startWorker1() {
i = 0;
timedCount1();
}

function startWorker2() {
j = 0;
timedCount2();
}

function timedCount1() {
i = i + 1;
document.getElementById("result1").innerHTML = i;
setTimeout("timedCount1()", 500);
}
function timedCount2() {
j = j + 1;
document.getElementById("result2").innerHTML = j;
setTimeout("timedCount2()", 500);
}

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


</script>
</head>
<body>
<div id="container">
<div id="ball" class="animate"></div>
</div>
<div id="bus">
<button onclick="startWorker1()">Start Worker 1</button>
<button onclick="startWorker2()">Start Worker 2</button>
<button onclick="stopWorker()">Stop Worker</button>
<div id="result1"></div>
<div id="result2"></div>
</div>
</body>
</html>


The code worked really smoothly and no process disturbed the other process.

Since I created in the code above three processes that are working in parallel, why do we need web workers?

Answer

All non-Web-worker JavaScript in a single document is single-threaded: it can only use one processor on the machine, and any significant uninterrupted processing will hog up the tab, preventing not only other JavaScript processes (*), but even display updating, even GIF animations. There are no long-running functions in your code, so you can't see the effect.

For example, try this:

function naiveFibonacci(n) {
  if (n <= 2) return 1;
  return naiveFibonacci(n - 1) + naiveFibonacci(n - 2);
}
s.addEventListener('click', evt => r.textContent = `is ${naiveFibonacci(parseInt(n.value))}`);
Naive Fibonacci of: <input id="n"><button id="s">Go</button> <span id="r"></span>
<img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Ajax-loader.gif">

On my computer, naiveFibonacci(42) takes about 2 seconds. Don't go too high, or your browser pane will crash; if you go too low, you just might miss the effect. You will notice that the spinning GIF will pause while the calculation is being made.

Changing uninterrupted calculations to timeouts so that they can give the browser some breathing space is, while trivial in this case, not trivial in a general case, so while it was necessary before Web workers, it's not ideal. Offloading long calculations to Web workers is the scenario they are designed for.


*) general "processes" as in "stuff that needs to be going on", not a technical "processes" as in "instances of computer program being executed"