performance - Chrome DevTools 中帧渲染的空闲时间

Question

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

在那个时间范围内运行的唯一东西是 GPU。我找不到这种行为的任何原因。这个问题背后的原因可能是什么，我如何改善项目中此类帧的渲染时间？

Answer 1

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

我在官方文档中找不到任何好的解释，但我只是在别处找到了一些东西:

The transparent areas of each vertical bar correspond to idle time, at least, idle on the part of your page. For example, say your first frame takes 15ms to execute and the next takes 30ms. A common situation is that frames are synchronized to refresh rate and in this case, the second frame took slightly longer than 15ms to render. Here, frame 3 missed the "true" hardware frame and was rendered upon the next frame, hence, the length of the second frame was effectively doubled.

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

我会将这个 SO 线程传递给我认识的为 Google 编写文档的人。他们也许能够更好地涵盖这个主题。