关于 Web Worker 并行性

Question

我的主线程的JS代码:

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

和里面的代码worker.js

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

我刚开始研究Web workers。他们应该不会阻塞 UI 并让你与之交互，而他们（工作人员）运行在一个单独的线程中以实现并行性。实际上，我通过运行上面的代码得到的是一个卡住的浏览器，对任何点击都没有响应。 worker是靠输出数字来工作的，然而UI的并行性和独立性在哪里呢？

我正在等待一些好的解释。

谢谢

Answer 1

工作完成内部网络工作者不会阻塞主线程中的任何内容。

向主线程发送消息需要主线程接收消息并处理它，占用主线程。

打个比方：

为了处理更重要的事情，爱丽丝让鲍勃帮她数到 1000。

如果 Bob 只是默默地数到 1000，那么一切都会很好。

不幸的是，每次他数到一个新数字时，她都要求他告诉她。

"Alice! Alice! Alice!"

"What is it Bob?"

"1!"

"Alice! Alice! Alice!"

"What is it Bob?"

"2!"

（注意：实际上，这将是异步的：Bob 会继续计数，只是将越来越长的数字队列推给 Alice，Alice 必须阅读消息并查看数字）

Web Worker 用于长运行操作。你的操作并不长运行，每次绕很短的循环都需要和主线程对话

Answer 2

您正在用工作人员通过 postMessage() 发送的消息淹没主线程。它们到达的速度可能快于调度它们并记录它们的速度，因此没有其他时间让主线程做很多事情。更改您的 postMessage 调用，使其仅在 500 毫秒过去后才向主线程发送更新，并且您不会使主线程过载，从而允许它在消息之间做其他事情。

例如，在 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);
  }
}

并且，这只会每 500 毫秒执行一次最新计数的 postMessage，以避免试图处理所有这些消息的主线程过载。

为了运行独立于主线程的worker，它需要真正独立于主线程，独立工作，而不是一直试图与主线程通信。最适用于大部分独立于主线程，只是偶尔需要与主线程通信的计算密集型操作。

关于 Web Worker 并行性

About Web Workers parallelism

javascript

multithreading

web-worker