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

Posted 2023-03-06

【中文标题】Chrome 开发工具：时间线 - 白条

【英文标题】：Chrome Dev Tools: Timeline - White Bars

【发布时间】：2015-11-17 23:29:50

【问题描述】：

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

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

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

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

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

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

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

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

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

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

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

【参考方案1】：

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

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

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

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

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

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

【讨论】：

我在链接到的文档中看到了有关“GPU 绑定”的帖子，但我尝试缩小屏幕以查看情况是否有所改善，但事实并非如此，这表明这是“某事别的”。我希望获得文档中含糊建议的附加信息。

视口大小不会影响受 GPU 限制的时间长度，至少在大多数情况下不会。即使有这样的相关性，也将是微不足道的。

你能给我一个参考解释吗？到目前为止，我提到的帖子是我发现的所有内容，这表明相反。 plus.google.com/+NatDuca/posts/BvMgvdnBvaQ

只有当你有一堆图层时，“图层”才适用。在 chrome://flags 中启用 DevTools Experiments 标志，然后在 DevTools 中，转到设置 > 实验选项卡。从那里，启用“图层面板”。重新启动 DevTools 后，检查站点上的该面板以了解您有多少层。如果你有很多，那么层大小可能会成为 GPU 的瓶颈。如果不是，那么您的网站就是一个大图层，并且视口大小不会成为大问题。

好的，你能给我指一个关于 Chrome 中“GPU 边界”的参考，以便我更好地理解这一点吗？