google-chrome-devtools - Chrome DevTools 中长帧的含义

Question

我想弄清楚为什么我的应用程序性能很差。所以我在 DevTools 中做了一个性能记录，我可以看到帧通常需要大约 150 毫秒，这太长了。




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

编辑
我已经按照 wOxxOm 的建议启用了一些与时间线相关的开发工具实验。有某种更新层任务。

Answer 1

我会说它来自你层中的太多节点，但通过一些研究我们现在可以发现 someone already had your problem before .引用回答者的话:

In your case, I would guess that you are triggering a fundamental layer invalidation that is forcing it to update a layer high up on the tree hierarchy which is then trickling down the tree and causing each of those layers to be updated. Although its hard to say without looking at your code.

Either way if this long Update Layer Tree is consistently happening before the Layout is being recalculated, it's most certainly related to that.

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