google-chrome - Chrome 开发工具 : Timeline - White Bars

Question

我正在尝试了解有关 Chrome 开发工具中时间线的一些内容。来自 documentation ，我认为灰色条和清晰条分别是“未由 DevTools 检测的事件”和“显示刷新周期之间的空闲时间”。

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




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

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

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



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

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

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

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

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

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

Answer 1

Will the "idle" clear bars always fill the time between renders?

不。这个空闲时间本质上是 GPU 限制的。这是浏览器等待 GPU 执行其操作并返回的地方。这里有波动是完全没问题的，只要你达到大约 60FPS，一切都很好。

Is there a rough relationship between the timeline profile and cpu utilization on the machine the profile is collected on?

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

Is there any way to characterize the "Uninstrumented" grey bars?

绝对不是，这就是为什么它被称为“未仪表化”的原因。这意味着 DevTools 不知道发生了什么。垃圾收集之类的事情确实会在时间线上标记，因为它知道该任务是什么。该团队正在努力缩小此类 Material 的范围。这是一个缓慢的过程来跟踪它并弄清楚如何将它呈现给 DevTools，所以我们将有很长一段时间没有仪表化的时间。