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

Question

我正在尝试了解有关 Chrome 开发工具中时间线的一些内容。从文档中，我发现灰色条和清晰条分别是“未由 DevTools 检测的活动”和“显示刷新周期之间的空闲时间”。

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

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

“空闲”清除条是否总是填满渲染之间的时间？

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

有明显的帧，其中空白没有填充渲染之间的空间。

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

在下面的配置文件中，大约 40% 的时间是空闲的，所以我可以期望这对应于使用约 60% 的核心用于配置文件中表示的操作吗？

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

或者是否有可能是典型的东西（垃圾收集等）？

希望这对一个问题来说不算太多。提前致谢

Answer 1

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

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

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

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

有什么方法可以描述“未经检测的”灰色条的特征吗？

绝对不是，这就是为什么它被称为“Uninstrumented”。这意味着 DevTools 不知道发生了什么。像垃圾收集这样的事情确实会在时间线上标记，因为它知道该任务是什么。该团队正在努力缩小此类材料的范围。追踪所有这些并弄清楚如何将其呈现给 DevTools 是一个缓慢的过程，因此我们将有相当长一段时间没有工具化的时间。