Chrome DevTools中的帧渲染空闲时间 [英] Idle time in frame rendering in Chrome DevTools

问题描述

在研究Web渲染优化时，我在许多流行的网站上遇到了奇怪的渲染行为.帧渲染时间的很大一部分是没有任何操作的空白空间. Apple促销页面中的示例

When doing research on web render optimization, i've encountered a strange render behavior on many popular websites. Big part of frame render time is empty space with no operations. Example from Apple promo page

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

The only thing that operates in that timeframe is a GPU. I couldn't find any cause for this behavior. What could be the reason behind this issue and how can i improve render time of such frames in my projects?

推荐答案

这是空闲时间，这是浏览器等待CPU或GPU进行某些处理的时间.它显示在文档页面如何使用时间轴工具.

This is idle time, the time when the browser is waiting on the CPU or GPU to do some processing. It is shown in the pie chart screenshot in the documentation page How to Use the Timeline Tool.

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

I can't find any good explanation in the official document, but I just found something elsewhere:

每个竖线的透明区域对应于空闲时间，至少与页面部分的空闲时间相对应.例如，假设您的第一帧执行需要15毫秒，而下一帧则需要30毫秒.常见的情况是帧与刷新速率同步，在这种情况下，第二帧的渲染时间略长于15ms.在这里，帧3错过了真正的"硬件帧，并在下一帧上渲染，因此，第二帧的长度实际上增加了一倍.

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.

来源: 通过Chrome DevTools时间轴和配置文件

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

I'll pass this SO thread onto someone I know of who writes documentation for Google. They might be able to better cover this topic.

这篇关于Chrome DevTools中的帧渲染空闲时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！