Javascript 使用Web Worker延迟重复事件

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

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

draw_worker.js

的内容类似于标准格式：

var i = 0;

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

timedCount();

工人使用的功能内容为：

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

的间隔延迟。如何进一步调查这个问题？

我一直在研究这个问题，因为在没有收到任何回复后，我别无选择。Chrome中可用的

开发工具

帮助我找到了根本原因。“性能”评测是在这种情况下提供帮助的正确工具。我在DevTools中选择了

perfroman

选项卡。随后分析问题所采取的步骤如下：

选择

CPU节流

至“5倍减速”

记录大约20秒

审查分析结果

主要关注点是

Main

部分中较宽的列，因为这些函数的执行时间较长

选择一个较宽的列。

摘要

选项卡显示时间分布的详细信息。然后选择

bottomup

table分析每个函数和子函数所用的时间

顶级函数是从

setInterval

调用调用的

Bottom-Up

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

事后任务相当简单。有问题的功能必须得到优化

我想在这里提出的要点是，由于未优化的函数是从

setInterval

调用的，因此它能够干扰

webworker

，甚至能够延迟它