Chrome DevTools:慢帧,但没有导致它们的事件

Question

当您在Chrome开发工具的时间轴中有慢帧(用红色三角形表示的那些帧)时,这意味着什么,但它没有显示导致它的原因(脚本,渲染,合成等).这就像没有真正发生但你仍然有janks.

Answer 1

如果您单击主线程上方的时间跨度，然后单击底部的“自下而上”选项卡，您可以看到正在进行的所有单独活动，合计时间总计为该总时间。我怀疑肯定还有一些您当前看不到的其他活动，但如果您垂直滚动，您应该会看到它们 - 可能Rasterize Paint是在另一个工作人员身上。

更新 我意识到自下而上视图中的时间加起来并不等于该帧显示的总时间。我又玩了一点，看起来剩余时间似乎是“空闲”时间。

如果您查看下面的屏幕截图，我已调整时间轴视图以包含大约一帧，其活动非常少。它比一帧多一点，因为您可以看到两侧的虚线稍微靠里一些。

如果您查看底部的“摘要”视图，您可以看到大部分时间都列为“空闲”。如果您假装我更准确地将时间轴视图过滤为恰好一帧（通过从汇总值中去掉一点点时间），您可能会相当自信地得出结论，总帧时间（显示在主窗口上方）线程栏）是“摘要”中显示的值的总和，包括“空闲”时间。