Chrome开发者工具：时间轴 - 白色条形图

Question

我想了解一些关于Chrome Dev Tools中时间轴的事情。从文档中，我了解到灰色和透明的条形是“未被DevTools工具检测到的活动”和“显示刷新周期之间的空闲时间”，分别表示两种不同的状态。

我的应用程序每帧都会渲染更新（requestAnimationFrame()），并且有一个典型的时间轴配置文件如下图所示：

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

"空闲"清除栏是否总是填充渲染之间的时间？

换句话说，我看到的白色栏是否符合预期？我倾向于这样认为，但文档中的示例截图看起来像：

有明显的帧，白色空间未填满渲染之间的空间。

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

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

有没有办法描述“未被检测”的灰色条形图？

还是有典型的东西可以这样做（垃圾回收等）？

希望这不是一个问题太多。提前致谢

- sethro

Answer 1

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

不是。这个空闲时间本质上是GPU绑定的。这是浏览器在等待GPU完成并返回的地方。在这里有波动是完全可以的，只要你大致达到60FPS，就没问题了。

时间轴剖面和收集剖面的机器的CPU利用率之间是否存在粗略关系？

据我所知，实际上并没有。这里的空闲时间是浏览器在等待系统的某些其他部分（主要是CPU或GPU）完成其工作的时间。它与使用多少资源无关。

有没有办法表征“未仪表化”的灰色条？

绝对没有，这就是为什么它被称为“未仪表化”。这意味着DevTools不知道发生了什么。像垃圾回收这样的任务会在时间轴上标记，因为它知道那个任务是什么。团队正在努力缩小这种类型的材料。跟踪所有这些并找出如何将其呈现给DevTools是一个缓慢的过程，因此我们将有一段时间的未仪表化时间。

- Garbee

---

我看到了文档中提到的“GPU受限”帖子，但我已经尝试缩小屏幕以查看是否有所改善，但并没有，这表明问题可能是“其他原因”。我希望能获得比文档中含糊暗示更多的信息。 - sethro

视口大小不会影响某些东西被GPU绑定的时间长度，至少在大多数情况下不会。即使存在这样的相关性，它也是微不足道的。 - Garbee

你能指引我一份解释这个的参考资料吗？到目前为止，我提到的帖子是我找到的唯一资料，它表明相反的情况。https://plus.google.com/+NatDuca/posts/BvMgvdnBvaQ - sethro

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

好的，你能给我指一下关于Chrome中“GPU boundedness”的参考资料吗？这样我就能更好地理解了。 - sethro

它的意思只是，“嘿，Chrome正在等待GPU完成并返回其任务。” 我所知道的就是这些。但有时候，这可能意味着GPU返回失败，例如操作某些SVG优化。在这种情况下，Chrome会转而让CPU来完成任务。 - Garbee