Chrome DevTools 中帧渲染的空闲时间
Idle time in frame rendering in Chrome DevTools
在研究网络呈现优化时，我在许多流行的网站上遇到了一种奇怪的呈现行为。帧渲染时间的很大一部分是空的 space，没有任何操作。 Example from Apple promo page
在那个时间范围内唯一运行的是 GPU。我找不到这种行为的任何原因。此问题背后的原因可能是什么？我如何才能改善项目中此类帧的渲染时间？
这是空闲时间，浏览器等待 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 编写文档的人。他们也许能够更好地涵盖这个话题。
在研究网络呈现优化时，我在许多流行的网站上遇到了一种奇怪的呈现行为。帧渲染时间的很大一部分是空的 space，没有任何操作。 Example from Apple promo page
在那个时间范围内唯一运行的是 GPU。我找不到这种行为的任何原因。此问题背后的原因可能是什么？我如何才能改善项目中此类帧的渲染时间？
这是空闲时间，浏览器等待 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 编写文档的人。他们也许能够更好地涵盖这个话题。