什么是chrome devtool时间轴框架概述矩形？

Question

（点击查看大图）

蓝色 - 加载，黄色 - 脚本，紫色 - 渲染，绿色 - 绘画

但是有很多轮廓矩形，那是什么？

Answer 1

@leiyonglin

Google Chrome开发人员已为Frame load定义了一个标准指标。它的每秒60帧，通过常识与60Hz的屏幕刷新率一致。所以一帧应该花费大约1/60秒。 16毫秒每个垂直条代表一个框架，它应该在特定的时间限制内，您可以将其视为水平条，以使页面足够响应。每个框架可以包含脚本，绘制，加载等多种内容。加载方式 - N / w请求像图像传输（网址）...因此，概述的矩形在统计上说明了这些过程（蓝色 - 加载，黄色 - 脚本，紫色 - 渲染，绿色 - 绘画）。矩形的无色部分表示浏览器（GPU / CPU）处理整个帧所需的时间。 您可以通过链接了解更多信息：
       https://developers.google.com/events/io/sessions/gooio2012/209/

参见一帧的屏幕截图和分析

在这一帧中显示，有2个绘制作业和一个JS事件跨越13.917毫秒 所有提到的事件（Loading，Paint等）都会被整理，剩下的时间是由浏览器，CPU / GPU

组成。