Chrome DevTools中长帧的含义

Question

我正在试图找出我的应用程序执行得非常糟糕的原因。所以我在DevTools中做了一个性能记录，我可以看到帧通常需要150毫秒，这太长了。

然而，我不明白为什么框架需要这么多时间。有一些javascript处理输入事件，一些DOM操作和一些绘画。这一切大约需要60毫秒。那么为什么帧长150毫秒？

修改 我已经启用了一些与时间轴相关的devtools实验，正如wOxxOm建议的那样。有一种更新层任务。

Answer 1

我会说它来自您层中太多的节点，但是通过一些研究，我们现在可以找到someone already had your problem before。引用答案：

  

就您而言，我想您正在触发一个基本面   层无效，迫使其更新位于   树的层次结构，然后向下滴落树并导致每个   这些要更新的图层。虽然没有它很难说   查看您的代码。

     

以这种方式（如果这种长的更新层树持续发生）   在重新计算布局之前，它肯定是相关的   

我建议您检查一下Alexander J. Ray指出的资源，尤其是HTML5 Rocks article。