Chrome DevTools中长帧的含义

Question

我试图弄清楚为什么我的应用程序表现非常糟糕.所以我在DevTools中做了一个性能记录,我可以看到帧通常需要大约150毫秒,这太长了.

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

编辑 我已经启用了一些与时间轴相关的devtools实验,正如wOxxOm建议的那样.有某种更新层任务.

Answer 1

我本来会说它来自您所在层中的太多节点，但通过一些研究，我们现在可以发现有人之前已经遇到过您的问题。引用一下回答者的话：

在您的情况下，我猜测您正在触发一个基本的层失效，这迫使它更新树层次结构中较高的层，然后该层会沿着树向下流动并导致每个层都被更新。虽然如果不看你的代码就很难说。

不管怎样，如果这个长更新层树在重新计算布局之前一直发生，那么它肯定与此相关。

我建议检查 Alexander J. Ray 指出的资源，尤其是HTML5 Rocks 文章。