使用Web Worker延迟重复事件

问题描述：

我的网页上执行的CPU密集型任务很少，涉及一些计算和绘图文本。这些任务应该在一个时间间隔（10-20毫秒）内重复。使用Web Worker延迟重复事件

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

的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和平板电脑的所有主流浏览器没有正常工作任何问题。正如我所期望的那样，在大约15-20毫秒的间隔内调用calculateDrawData()函数。但在少数平板电脑和手机上，事情并不顺利。我调查了一下，发现calculateDrawData()没有在大约15毫秒的时间间隔内被调用，并且在调用之前非常频繁地需要70毫秒或更多时间。

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

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

答

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

选择CPU throttling为“5 x slowdown”。
记录约20秒。
评论分析结果。
关注的主要区域是Main部分中较宽的列，因为这些展品功能需要较长时间才能执行。
选择较宽的一列。 Summary选项卡显示时间分布的详细信息。然后选择Bottoms-Up表分析每个功能和子功能所用的时间。

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

Bottom-Up节指出的功能约占总执行时间的70％。

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

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

使用Web Worker延迟重复事件

相关推荐