（点击放大）
蓝色 - 加载，黄色 - 脚本，紫色 - 渲染，绿色 - 绘画
但是有很多轮廓矩形，那是什么？
问问题
798 次
1 回答
6
@leiyonglin
谷歌浏览器开发人员已经定义了帧加载的标准度量。它的每秒 60 帧按照常识与 60Hz 的屏幕刷新率相吻合。所以一帧大约需要 1/60 秒。16 毫秒。每个垂直条代表一个框架，它应该在特定的 time-limit 内，您将其视为水平条，以使您的页面具有足够的响应性。每个帧都可以有多个从脚本、绘画、加载等方面发生的事情。加载方式 - N/w Request like image transfer (url) ...因此，轮廓矩形在统计上说明了这些过程（蓝色 - 加载，黄色 - 脚本，紫色 - 渲染，绿色 - 绘画）。矩形的无色部分表示浏览器（GPU/CPU）处理整个帧所需的时间。您可以通过链接了解更多信息：
https://developers.google.com/events/io/sessions/gooio2012/209/
看一个 1 帧的屏幕截图和分析
在这一帧显示中，有 2 个绘画作业和一个 JS 事件跨越 13.917 毫秒所有提到的事件（加载、绘画等）都被整理，其余时间由浏览器、CPU/GPU
于 2013-02-21T06:10:43.390 回答