Chrome DevTools中帧渲染的空闲时间

Question

在研究web渲染优化时，我在许多流行的网站上遇到了奇怪的渲染行为。帧渲染时间的很大一部分是没有操作的空空间。Example from Apple promo page

唯一能在这段时间内运行的就是GPU。我找不到这种行为的任何原因。这个问题背后的原因是什么?我如何在我的项目中改善这些帧的渲染时间？

Answer 1

这是空闲时间，即浏览器等待CPU或GPU进行某些处理的时间。它显示在文档页面How to Use the Timeline Tool的饼图屏幕截图中。

我在官方文档中找不到任何好的解释，但我只是在其他地方找到了一些东西：

每个垂直条的透明区域对应于空闲时间，至少是在页面的空闲部分。例如，假设第一帧的执行时间为15ms，下一帧的执行时间为30ms。一种常见的情况是帧与刷新率同步，在这种情况下，第二帧的渲染时间略长于15ms。在这里，帧3错过了“真正的”硬件帧，并在下一帧上渲染，因此，第二帧的长度实际上增加了一倍。

来源： Improving Web App Performance With the Chrome DevTools Timeline and Profiles

我会把这个帖子传给我认识的一个为Google写文档的人。他们也许能够更好地涵盖这个主题。