初探Chrome的性能分析工具--Performance

瑶瑶问：会使用chrome进行网页性能分析吗？
我 摇头。。。

今天花时间在网上查找资料了解了一下，希望之后在自己的项目中也能找机会运用一下。这次简单记录一下Performance的用法，之后有具体应用将持续更新

Performance

如上图，从上到下分别为4个部分
1：工具栏，包含录制，刷新页面分析，清除结果等一系列操作工具
2：Overview总览图，高度概括随时间线的变动，包括FPS（FPS（frames per second）是用来分析动画的一个主要性能指标。能保持在60的FPS的话，那么用户体验就是不错的。），CPU，NET
3：火焰图，从不同的角度分析框选区域 。例如：Network，Frames,Interactions, Main等
4：Details：精确到毫秒级的分析，以及按调用层级，事件分类的整理

注意，在2，3区域里：

1. 灰色的虚线表示一帧，通过两帧之间的绿色区域的运算时间，可以求得当前的FPS（事实上当你鼠标放在绿色条上时会出现类似‘78.8ms ~ 13fps’的字样）;
2. 黄色的虚线会有 FMP at ***ms’的字样，经过查询，暂确定为[ first meaning paint ]，即首次有效绘制；而这条线会紧跟paint之后，并在composite之前。
3. 蓝色的虚线表示DOMContentLoaded事件
4. 红色的虚线表示load事件
5. 绿色的虚线为 first paint事件

在network里面 ：
1. HTML 文件为蓝色。
2. 脚本为黄色。
3. 样式表为紫色。
4. 媒体文件为绿色。
5. 其他资源为灰色。

参考：developers.google.com，全新Chrome Devtool Performance使用指南