Chrome DevTools 中长帧的含义

Question

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

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

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

Answer 1

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

在你的情况下，我猜你正在触发一个基本面 层失效，迫使它更新上一层 树层次结构，然后沿着树向下流动并导致每个 要更新的那些层。虽然很难说没有 查看您的代码。

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

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