Question

我的网页上执行的CPU任务很少，需要进行一些计算和绘图。应该以一定间隔（10-20毫秒）重复这些任务。

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

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 ms的间隔调用。但在少数平板电脑和手机上，事情并不顺利。我调查并发现calculateDrawData()没有以大约15毫秒的间隔调用，并且在调用之前它经常需要70毫秒或更长时间。

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

我只是想知道在调用onmessage的时间间隔内可能导致延迟的原因。如何进一步调查？

Answer 1

我一直在努力解决这个问题，因为在SO收到没有回复之后别无选择。 Chrome中提供的Developer tools帮助我挖掘了根本原因。 “性能”分析是在这种情况下提供帮助的正确工具。我在DevTools中选择了Perfromance选项卡。之后采取的分析问题的步骤是：

选择CPU throttling至“5 x slowdown”。
记录约20秒。
查看分析结果。
关注的主要领域是Main部分中较宽的列，因为这些展览功能需要更长的时间才能执行。
选择较宽的列之一。 Summary标签显示了时间分布的详细信息。然后选择Bottoms-Up表来分析每个函数和子函数所花费的时间。

从setInterval电话中调用了顶级功能。

Bottom-Up部分指出的功能占总执行时间的70％左右。

之后的任务相当简单。有问题的功能必须进行优化。

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

使用Web Worker延迟重复事件

1 个答案: