瑶瑶问:会使用chrome进行网页性能分析吗?
我 摇头。。。
今天花时间在网上查找资料了解了一下,希望之后在自己的项目中也能找机会运用一下。这次简单记录一下Performance
的用法,之后有具体应用将持续更新
如上图,从上到下分别为4个部分
1:工具栏,包含录制,刷新页面分析,清除结果等一系列操作工具
2:Overview总览图
,高度概括随时间线的变动,包括FPS(FPS(frames per second)
是用来分析动画的一个主要性能指标。能保持在60的FPS
的话,那么用户体验就是不错的。),CPU
,NET
3:火焰图,从不同的角度分析框选区域 。例如:Network
,Frames
,Interactions
, Main
等
4:Details
:精确到毫秒级的分析,以及按调用层级,事件分类的整理
注意,在2,3区域里:
- 灰色的虚线表示一帧,通过两帧之间的绿色区域的运算时间,可以求得当前的FPS(事实上当你鼠标放在绿色条上时会出现类似‘78.8ms ~ 13fps’的字样);
-
黄色的虚线会有
FMP at ***ms’
的字样,经过查询,暂确定为[ first meaning paint ],即首次有效绘制;而这条线会紧跟paint之后,并在composite之前。 - 蓝色的虚线表示DOMContentLoaded事件
-
红色的虚线表示
load
事件 -
绿色的虚线为
first paint
事件
在network里面 :
1. HTML 文件为蓝色。
2. 脚本为黄色。
3. 样式表为紫色。
4. 媒体文件为绿色。
5. 其他资源为灰色。
网友评论