performance - Chrome DevTools : Slow frames, 但没有导致它们的事件

Question

这是什么意思，当您在 Chrome Dev Tools 的时间轴中有慢帧(用红色三角形表示的那些帧)，但它没有显示导致这种情况的原因(脚本、渲染、合成等)时，这是什么意思。这就像什么都没发生，但你仍然有卡顿。

Answer 1

如果您单击主线程上方的时间跨度，然后单击底部的自下而上选项卡，您可以看到正在进行的所有单个事件，这些事件加起来就是总时间。我怀疑肯定还有一些您目前看不到的其他事件，但是如果您垂直滚动，您应该会看到它们 - 可能是 Rasterize Paint在另一个 worker 身上。



更新
我意识到“自下而上” View 中的时间加起来不等于帧显示的总时间。我做了更多的演奏，看起来剩余的时间是“空闲”时间。

如果您查看下面的屏幕截图，我已将时间轴 View 调整为包含大约一个事件非常少的帧。它比一帧多一点，因为你可以看到两边的虚线更远一点。

如果您随后查看底部的“摘要” View ，您会看到大部分时间都被列为“空闲”。如果您假装我更准确地将时间轴 View 过滤为一帧(通过从摘要值中减去一点时间)，您可能相当自信地得出结论，总帧时间(显示在主 View 上方) Thread bar) 是“摘要”中显示的值的总和，包括“空闲”时间。