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并允许您与它进行交互，而它们（工作者）在一个单独的线程中运行以实现并行性。实际上，通过运行上面的代码我得到的是一个卡住的浏览器，没有响应任何点击。工作人员通过输出数字来工作，但是UI的并行性和独立性在哪里？

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

谢谢

Answer 1

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

向主线程发送消息要求主线程接收消息并处理它然后绑定主线程。

类比：

为了继续处理更重要的事情，爱丽丝要求鲍勃为她计数1000。

如果鲍勃只是默默地数到1000，那么一切都会很棒。

不幸的是，每当他计算到一个新号码时，她都要求他告诉她。

＆＃34;爱丽丝！爱丽丝！爱丽丝＆＃34;！

＆＃34; Bob是什么？＆＃34;

＆＃34;！1＆＃34;

＆＃34;爱丽丝！爱丽丝！爱丽丝＆＃34;！

＆＃34; Bob是什么？＆＃34;

＆＃34;！2＆＃34;

（注意：实际上，这将是异步的：鲍勃会继续计算，只是在爱丽丝推送一个更长的数字队列，他们必须阅读这些消息并查看数字）

Web Workers用于长时间运行。你的操作不会长时间运行，每次绕过非常短的循环时都需要与主线程通信。

Answer 2

您正在通过postMessage()向工作人员发送的消息充斥主线程。它们可能比它们发送和记录它们的速度更快到达，因此主线程没有其他时间做很多事情。更改你的postMessage调用，这样它只会在500ms过去后向主线程发送一个更新，你不会重载主线程，允许它在消息之间做其他事情。

例如，请在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，以避免重载试图处理所有这些消息的主线程。

对于工作者独立于主线程运行，它实际上需要独立于主线程，执行独立工作，而不是一直尝试与它进行通信。它最适用于大多数独立于主线程的计算密集型操作，只是偶尔需要与主线程通信。

关于Web Workers并行性

2 个答案: