使用 Web Worker 延迟重复事件

Question

我的网页上几乎没有 CPU 需要执行的密集型任务，这些任务涉及一些计算和文本绘制。这些任务应该每隔一段时间（10-20 毫秒）重复一次。

我决定使用 Web Worker 来完成这项工作，考虑到我们的目标浏览器是支持 HTML5 和 Web Worker 的主流浏览器的最新版本。

draw_worker.js 的内容类似于标准格式：

var i = 0;

function timedCount() {
    i = i + 1;
    postMessage(i);
    setTimeout("timedCount()", 15);
}

timedCount();

Worker使用的函数内容为：

function startWorker() {
    if(typeof(Worker) !== "undefined") {
        if(typeof(w) == "undefined") {
            w = new Worker("draw_worker.js");
        }
        w.onmessage = function(event) {
            //Function to calculate & draw
            calculateDrawData();
        };
    }

}

PC 和平板电脑上的所有主要浏览器都可以正常运行，没有任何问题。 calculateDrawData() 函数按我预期的大约 15-20 毫秒的间隔调用。但在少数平板电脑和手机上，事情并不顺利。我调查并发现 calculateDrawData() 没有以大约 15 毫秒的间隔调用，并且经常在调用之前占用 70 毫秒或更长时间。

我怀疑 calculateDrawData() 功能的执行可能需要很长时间。但是经过调查发现calculateDrawData()只需要6-12毫秒。

我只是想知道是什么导致了调用 onmessage 的间隔延迟。如何进一步调查？

Answer 1

我一直在解决这个问题，因为在 SO 没有收到任何回复后我别无选择。 Chrome 中可用的 Developer tools 帮助我找出根本原因。 "Performance" 分析是在这种情况下提供帮助的正确工具。我在 DevTools 中选择了 Perfromance 选项卡。之后采取的分析问题的步骤是：

Select CPU throttling 到“5 倍减速”。
记录约20秒
查看分析结果。
主要关注的领域是 Main 部分中较宽的列，因为这些展示功能需要更长的执行时间。
Select编辑了更宽的专栏之一。 Summary 选项卡显示了时间分配的详细信息。然后选Bottoms-Uptable分析各功能及子功能所用时间

正在从 setInterval 调用中调用顶级函数。

Bottom-Up 部分指出的函数占用了大约 70% 的总执行时间。

之后的任务就比较简单了。必须优化相关功能。

我想在这里提出的要点是，由于未优化的函数是从 setInterval 调用的，它能够干扰 Web Worker 甚至能够延迟它。

使用 Web Worker 延迟重复事件

Delayed repetition of an event using Web Worker

html

javascript

jquery

web-worker

microsoft-edge