关于Web Workers并行

Question

我的JS代码主螺纹:

$（'body'）.on（'click'，function（）{alert（'click）；}）；var-worker=新工人（'worker.js'）；worker.addEventListener（“消息”，函数（e）{控制台.log（e.data）；});

和里面的代码worker.js（工作人员.js）

var n=1；while（真）{n++；postMessage（n）；}

我刚开始研究网络工作者它们应该不会阻塞UI并让您与之交互，而它们（工作线程）在单独的线程中运行以实现并行。实际上，我通过运行上述代码得到的是一个对任何单击都没有响应的卡住的浏览器。工人通过输出数字工作，但是UI的并行性和独立性在哪里？

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

谢谢你

Answer 1

完成的工作里面webworker不会阻止主线程中的任何内容。

向主线程发送消息需要主线程拾取消息并进行处理做把主线捆起来。

类比：

为了继续做更重要的事情，爱丽丝让鲍勃替她数到1000。

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

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

“爱丽丝！爱丽丝

“是什么，鲍勃？”

"1!"

“爱丽丝！爱丽丝

“是什么，鲍勃？”

"2!"

（注意：实际上，这是异步的：鲍伯会继续计数，只是向爱丽丝推着越来越长的数字队列，爱丽丝必须阅读信息并查看数字）

Web Workers适用于长时间运行操作。您的操作运行时间不长，每次运行非常短的循环时都需要与主线程对话。

Answer 2

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

例如，在worker.js中尝试以下操作：

var n=1；var lastSend=日期.now（）；var现在；while（真）{n++；now=日期.now（）；if（now-lastSend>500）{lastSend=现在；postMessage（n）；}}

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

为了使worker独立于主线程运行，它实际上需要独立于主进程，执行独立的工作，而不是一直试图与它通信。它最适合用于计算密集型操作，这些操作大多独立于主线程，并且只偶尔需要与主线程通信。