Chrome DevTools中帧渲染的空闲时间

Question

在研究网络渲染优化时，我在许多热门网站上遇到了奇怪的渲染行为。框架的大部分渲染时间是没有操作的空白空间。 Example from Apple promo page

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

Answer 1

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

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

  

每个垂直条的透明区域对应于空闲时间，至少是页面空闲时间。例如，假设您的第一帧需要15ms才能执行，而下一帧需要30ms。常见的情况是帧与刷新率同步，在这种情况下，第二帧花费的时间略长于15ms。在这里，第3帧错过了＆＃34; true＆＃34;硬件帧并在下一帧上渲染，因此，第二帧的长度实际上加倍。

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

我将这个SO线程传递给我知道谁为Google编写文档的人。他们可能能够更好地涵盖这一主题。