在研究网页渲染优化时，我在许多流行的网站上都遇到了奇怪的渲染行为。帧渲染时间的很大一部分是没有操作的空白空间。 Example from Apple promo page
在该时间范围内唯一运行的是 GPU。我找不到这种行为的任何原因。此问题背后的原因可能是什么？如何在我的项目中改善此类帧的渲染时间？
【问题讨论】：
标签： performance optimization web rendering google-chrome-devtools
这是空闲时间，浏览器等待 CPU 或 GPU 进行某些处理的时间。它显示在文档页面How to Use the Timeline Tool 的饼图屏幕截图中。
我在官方文档中找不到很好的解释，但我只是在别处找到了一些东西：
每个垂直条的透明区域对应于空闲时间，至少是页面部分的空闲时间。例如，假设您的第一帧需要 15 毫秒来执行，而下一帧需要 30 毫秒。一种常见的情况是帧与刷新率同步，在这种情况下，第二帧的渲染时间略长于 15 毫秒。在这里，第 3 帧错过了“真正的”硬件帧并在下一帧上渲染，因此，第二帧的长度有效地加倍了。
来源： Improving Web App Performance With the Chrome DevTools Timeline and Profiles
我会将此 SO 线程传递给我认识的为 Google 编写文档的人。他们可能能够更好地涵盖这个主题。
【讨论】：