CODEWITHSUNDEEP
javascriptmultithreadingweb-worker
Unknown developer
Unknown developer

Reputation: 5920

About Web Workers parallelism

My JS code of the main thread:

$('body').on('click',function(){alert('click');});
var worker = new Worker('worker.js');
worker.addEventListener('message', function(e) {    
        console.log(e.data);
});

and the code inside worker.js

var n = 1;
while (true) {
  n++;
  postMessage(n);
}

I 've just started to study about Web workers. They are supposed to not block UI and let you interact with it, while they (the workers) run in a separate thread as to implement parallelism. In practice, what am I getting by running the above code is a stuck browser with no response to any click. The worker works by outputting numbers, however where is parallelism and independence of UI?

I am awaiting for some good explanation.

Thank you

Upvotes: 3

Views: 684

Answers (2)

jfriend00
jfriend00

Reputation: 707148

You are flooding the main thread with messages sent from the worker via postMessage(). They are probably arriving faster than it can dispatch them and log them, thus leaving no other time for the main thread to do much. Change your postMessage calls so it only sends an update to the main thread when 500ms have elapsed and you will not be overloading the main thread, allowing it do other things in between messages.

For example, try this in worker.js:

var n = 1;
var lastSend = Date.now();
var now;
while (true) {
  n++;
  now = Date.now();
  if (now - lastSend > 500) {
      lastSend = now;
      postMessage(n);
  }
}

And, this will only do a postMessage of the lastest count every 500ms to keep from overloading the main thread trying to process all those messages.

For the worker to run independently from the main thread, it needs to actually be independent from the main thread, performing independent work, not trying to communicate with it all the time. It is best used for compute intensive operations that are mostly independent of the main thread and only occasionally need to communicate with the main thread.

Upvotes: 2

Quentin
Quentin

Reputation: 943100

Work done inside the web worker won't block anything in the main thread.

Sending a message to the main thread requires that the main thread pick up the message and deal with it though and that does tie up the main thread.

An analogy:

In order to get on with something more important, Alice has asked Bob to count to 1000 for her.

If Bob had just silently counted to 1000, then all would be great.

Unfortunately, she asked him to tell her every time he counted to a new number.

"Alice! Alice! Alice!"

"What is it Bob?"

"1!"

"Alice! Alice! Alice!"

"What is it Bob?"

"2!"

(NB: In reality, this would be asynchronous: Bob would keep counting and just be shoving an ever longer queue of numbers at Alice who would have to be reading the messages and looking at the numbers)

Web Workers are for long running operations. Your operation is not long running, it needs to talk to the main thread every time it goes around the very very short loop.

Upvotes: 3

Related Questions