Chrome的Performance面板

1、Performance介绍

1.1、概况图

1.2、无痕模式

无痕模式可以保证Chrome在一个相对干净的环境下运行，避免chrome上安装的插件影响性能分析结果。 文件—>打开新的无痕式窗口，或使用快捷键ctrl + shift + N 打开无痕模式下的chrome新标签页

1.3、性能记录

1.4、加载时性能记录录制

若要分析页面记载时性能需要录制加载时性能。

1. 打开待分析性能的页面。

2. 打开Devtools中Performance窗口。

3. 点击左上角重新加载按钮。DevTools会自动记录页面加载是各项性能指标，加载完成几秒后自动停止记录。 Devtools记录会自动增加

1.5、清除记录

清除 Performance 窗口中的记录数据。

1.6、抓取运行时屏幕快照

点选Screenshots选项开启为每一帧记录屏幕快照功能。

1.7、查看内存度量值

点选Memory 选项打开内存度量功能。 DevTools在Summary面板上侧显示一个新的Memory 图表。在 NET图表下边也显示一个HEAP图表。HEAP图表提供的信息同Memory面板中JS Heap提供的信息相同。

1.8、禁用JavaScript采样

1.9、控制录制过程中的网络加载速度

修改Network点选项，可自定义。

1.10、开启加速渲染工具

点选Enable advanced paint instrumentation选项（会带来大量的性能开销）

1.11、控制录制过程中CPU工作频率

1.12、控制录制过程中CPU工作频率

1.13、加载记录

单击鼠标右键选择 Load Profile加载记录。

2、分析性能记录

运行时或者加载时性能录制结束后，在Performance窗口中会显示相关数据，从而对于记录过程中的情况进行分析。

2.1、选择记录中的一部分

2.2、FPS(帧)信息

页面活动时的FPS变化信息，通常设备的屏幕的刷新频率是60FPS，超过的话，则有可能产生卡顿现象

2.3、查看主线程活动

DevTools采用随机的颜色标识脚本信息，如上面图中浅绿色标识函数调用，深黄色标识脚本活动。

若想隐藏火焰图中的JavaScript中调用的详细信息，请查看前面介绍的禁用JavaScript样例功能。若禁用JavaScript样例功能，你只可以看到初始调用事件。比如，图中标识的Timer fired 和Function Call 。

2.4、在表格中查看活动

录制结束后，利用Main窗口中信息不是分析数据的唯一方式。DevTools另外提供了三种表格式分析活动方式，每种方式都是从不同的角度出发: 若想分析那些活动占用时间更多时，可以利用 Bottom-Up窗口。 若想分析导致更多活动的根活动时，可以采用 Call Tree。 若想按顺序分析记录中发生的活动时，可以利用Event Log窗口。

2.5、根活动

根活动指的是浏览器触发的一系列流程。例如，当你点击页面内容，浏览器触发一个Event作为根活动，该Event可能回调一个事件处理事件。 在Main面板中的火焰图中，根活动展示在上部，在Call Tree和Event Log面板中，根活动展示在顶层。

2.6、Call Tree标签页

Call Tree 标签页中展示记录中被选中部分的活动信息。

2.7、Bottom-Up标签页

利用Bottom-Up标签查看占用最多时间的活动。对占用活动的排序。 Self Time表示对应活动消耗的时间。 Total Time表示对应活动以及子活动共同消耗的时间。

2.8、Event Log标签页

2.9、Network模块

2.10、分析每秒传输帧数（FPS）

• 查看FPS图表了解整个记录中FPS的概况。

• Frames模块查看每一帧时间消耗。

• 利用FPS meter工具(MoreTools—>Rendering)在页面运行时实时查看FPS信息。

2.11、FPS图表

FPS 图表显示了整个记录过程中帧率的概况。图表中绿色折线越高代表帧率越好。 FPS折线图上测出现的红色横线为一条性能警示线，表示帧率低于该值会严重影响用户体验。

2.12、Frames模块

Frames 模块清晰表明每个帧消耗时间。 鼠标在某一帧上悬停可以查看更多详细信息。

2.13、查看交互信息

利用Interactions模块查看并分析记录过程中用户的交互操作。

2.14、查看GPU活动

2.15、查看栅格活动

在Raster模块查看栅格活动信息