什么是chrome devtool时间轴框架概述矩形？
lei*_*lin 3 javascript google-chrome-devtools
(点击查看大图)
蓝色 - 加载,黄色 - 脚本,紫色 - 渲染,绿色 - 绘画
但是有很多轮廓矩形,那是什么？
@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毫秒所有提到的事件(加载,绘制等)进行整理,其余时间由浏览器,CPU/GPU
| 归档时间： |
|
| 查看次数： |
792 次 |
| 最近记录： |