(点击放大)
蓝色 - 加载，黄色 - 脚本，紫色 - 渲染，绿色 - 绘画
但是有很多轮廓矩形，那是什么？
最佳答案
@雷永林
Google Chrome 开发者定义了框架加载的标准指标。它的每秒 60 帧，根据常识与 60Hz 的屏幕刷新率相吻合。所以一帧大约需要 1/60 秒。 16 毫秒。每个垂直条代表一个框架，它应该在特定的时间限制内，您将其视为水平条，以使您的页面具有足够的响应能力。每一帧都可以从脚本、绘画、加载等多个方面进行。加载方式 - N/w 请求像图像传输 (url) ...因此，轮廓矩形从统计上说明了这些过程(蓝色 - 加载，黄色 - 脚本，紫色 - 渲染，绿色 - 绘画)。矩形的无色部分表示浏览器 (GPU/CPU) 处理整个帧所花费的时间。
您可以通过链接了解更多信息:
https://developers.google.com/events/io/sessions/gooio2012/209/
看一张1帧的截图和分析
在这一帧显示中，有 2 个绘画作业和一个 JS 事件跨越 13.917 毫秒 所有提到的事件(加载、绘画等)都经过整理，其余时间由浏览器、CPU/GPU
关于javascript - chrome devtool timeline Frames outlined rectangle 是什么意思？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14994815/