Chrome页面性能工具(performance,以前的timeline)——初探
先默默给自己一个例行奖励:写完这篇,我就去看番
1.简单页面
下面先自己写一个简单页面吧,多简单呢,如下
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
超简单的页面对吧,就像人生写的前几段HTML代码一样吧。嗯,那就怀着这样的想法,接受 超 巨 细节信息的轰炸吧!
从上到下分别为4个区域
1:具体条,包含录制,刷新页面分析,清除结果等一系列操作
2:overview总览图,高度概括随时间线的变动,包括FPS,CPU,NET
3:火焰图,从不同的角度分析框选区域 。例如:Network,Frames, Interactions, Main等
4:总结区域:精确到毫秒级的分析,以及按调用层级,事件分类的整理
注意,在2,3区域里:
1. 灰色的虚线表示一帧,通过两帧之间的绿色区域的运算时间,可以求得当前的FPS(事实上当你鼠标放在绿色条上时会出现类似‘78.8ms ~ 13fps’的字样);
2. 黄色的虚线会有 ‘FMP at ***ms’ 的字样,经过我查询,暂确定为[ first meaning paint ],即首次有效绘制;而这条线会紧跟paint之后,并在composite之前。
3. 蓝色的虚线表示DOMContentLoaded事件
4. 红色的虚线表示load事件
5. 绿色的虚线为 first paint事件
在network里面,在network里面,在network里面(重要事件说三遍) :
1. HTML 文件为蓝色。
2. 脚本为黄色。
3. 样式表为紫色。
4. 媒体文件为绿色。
5. 其他资源为灰色。