JavaScript事件循环和Web工作者

2019-05-27 18:21:56 阅读：268 来源： 互联网

所以我和一位同事就JavaScript事件循环和Web Workers的使用进行了长时间的讨论.在单个Web页面中,不同的Web Workers具有不同的堆栈,堆和消息队列,形式为here,具体为：

A web worker or a cross-origin iframe has its own stack, heap, and message
queue. Two distinct runtimes can only communicate through sending messages via
the postMessage method. This method adds a message to the other runtime if the
latter listens to message events.

但是在同一个事件循环中执行的所有消息,或者每个Web Worker是否都有自己的事件循环？

我问这个是因为我在一个页面中有两个Web Worker,一个按顺序执行计算量很大的操作,而另一个只处理一个WebRTC连接.
我不会详细介绍,但在我看来,计算量很大的Web Worker从JavaScript事件循环中消耗了大量计算时间,而其他工作者只需要保持连接活动(我想通过心跳)无法这样做,连接最终会丢失.

这就是我的信念.如果不是这种情况,并且两个Web Workers在不同的事件循环上工作,那么我无法解释为什么当计算Web Worker上的负载很重时连接丢失(当负载很轻时连接不会丢失).

解决方法:

每个工人都有自己的事件循环.从the specification开始：

Each WorkerGlobalScope object has a distinct event loop, separate from those used by units of related similar-origin browsing contexts.

然后是here：

The global scope is the “inside” of a worker.

…后面是前面引用中引用的WorkerGlobalScope接口的定义.

计算量大的工作者可能会占用可用的处理时间,但它并没有阻止其他工作人员的事件循环.

我们也可以通过快速测试来检查：

page.html中：

<!DOCTYPE HTML "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>Two Workers</title>
<style>
body {
    font-family: sans-serif;
}
pre {
    margin: 0;
    padding: 0;
}
</style>
</head>
<body>
<div>Fast: <span id="fast"></span></div>
<div>Slow: <span id="slow"></span></div>
<script>
(function() {
    var fastWorker = new Worker("fastworker.js");
    var fast = document.getElementById("fast");
    var slowWorker = new Worker("slowworker.js");
    var slow = document.getElementById("slow");

    fastWorker.addEventListener("message", function(e) {
        fast.innerHTML = e.data || "??";
        fastWorker.postMessage("ping");
    });

    slowWorker.addEventListener("message", function(e) {
        slow.innerHTML = e.data || "??";
        slowWorker.postMessage("ping");
    });

    fastWorker.postMessage("start");
    slowWorker.postMessage("start");
})();
</script>
</body>
</html>

slowworker.js：

var counter = 0;
self.addEventListener("message", function(e) {
    var done = Date.now() + 1000; // 1 second
    while (Date.now() < done) {
        // Busy wait (boo!)
    }
    ++counter;
    self.postMessage(counter);
});

fastworker.js：

var counter = 0;
self.addEventListener("message", function(e) {
    var done = Date.now() + 100; // 100ms
    while (Date.now() < done) {
        // Busy wait (boo!)
    }
    ++counter;
    self.postMessage(counter);
});

正如你所看到的,“快速”的数字比“慢”快得多,表明它正在处理它的消息.

(我本可以制作一个工作文件并在启动命令中发送延迟,但是……)

标签：javascript,web-worker,webrtc
来源： https://codeday.me/bug/20190527/1165128.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

JavaScript事件循环和Web工作者