Chrome 开发工具：时间线 - 白条

Question

我正在尝试了解有关 Chrome 开发工具中时间线的一些信息。从documentation 中，我收集到灰色和透明条分别是“未由 DevTools 检测的活动”和“显示刷新周期之间的空闲时间”。

我有一个应用程序，它呈现更新每一帧 (requestAnimationFrame()) 并具有如下图所示的典型时间线配置文件：

不幸的是，对我来说，文档并没有明确说明如何评估我的应用程序中的灰色和白色空间。我的问题是：

“空闲”透明条是否总是填充渲染之间的时间？

换句话说，关于白条，我看到的配置文件是否符合预期？我很想这样假设，但文档中的示例屏幕截图如下所示：

显然有一些帧的空白没有填满渲染之间的空间。

时间线配置文件和收集配置文件所在机器上的 CPU 利用率之间是否存在粗略关系？

在下面的配置文件中，大约 40% 的时间是空闲的，所以我是否可以期望这相当于使用约 60% 的内核来执行配置文件中表示的操作？

有什么方法可以表征“未测量”的灰色条吗？

或者这可能是典型的事情（垃圾收集等）？

希望这对于一个问题来说并不过分。提前致谢

Answer 1

“空闲”透明条是否总是填充渲染之间的时间？

没有。这个空闲时间本质上是受 GPU 限制的。这是浏览器在 GPU 上等待执行其操作并返回的地方。这里有波动是完全可以的，只要你达到 60FPS 左右就可以了。

时间线配置文件与收集配置文件的机器上的 cpu 利用率之间是否存在粗略关系？

据我所知并非如此。空闲时间是浏览器等待系统的其他部分（主要是 CPU 或 GPU）完成其工作的时间。它与它使用多少资源无关。

有什么方法可以表征“未测量”的灰色条吗？

绝对不是，这就是为什么它被称为“无仪表”。这意味着 DevTools 不知道发生了什么。诸如垃圾收集之类的事情确实会在时间轴上标记出来，因为它知道该任务是什么。该团队正在努力缩小这种材料的范围。跟踪这一切并弄清楚如何将其呈现给 DevTools 是一个缓慢的过程，因此我们将有相当长的一段时间没有使用仪器。