performance - chrome devTool

chrome devtools里面的performance，可以分析网页运行时的各种性能

面板介绍

1. 最左侧的实心圆 record按钮，点击即开始记录页面操作

   

   

   弹框显示当前进度，stop按钮停止记录，然后会生成profile加载到视图框。

2. 从左往右第二个 刷新按钮 ，点击刷新页面并开始记录，页面加载完成后自动生成profile

3. 第三个按钮 clear 清空当前统计的profile

4. 4、5分别为load/save 载入/保存 profile

5. 第六个下拉框为历史记录，下拉可以选择最近加载过的几个profile

6. screenshots radio框控制是否显示截图功能

7. memory 控制是否显示内存使用量

8. Disable JavaScript samples 禁用和启用JavaScript示例。禁用后，记录的主要部分要短得多，因为它忽略了所有JavaScript调用堆栈。

9. Enable advanced paint instrumentation (slow) 启用高级绘画工具，详细记录渲染事件的细节

10. 启用高级绘画工具（慢速）

11. network可以选择网络模式

12. cpu可以自定义cpu性能

性能图

下面四个分别为FPS刷新速率 CPU消耗 NET网络请求 HEAP内存占用

可以使用鼠标拖拉放大缩小

图表解读

1. 在第二行我们可以看见Warning Recurring handler took 68.25 ms的提示，意思就是循环操作性能损耗太严重，箭头指向的黄色款右上角也有红色三角形标识

   

   Initiator Reveal标识了操作来源，点击跳转到下面详细的调用栈

   

2. 图中X轴每一个横条都代表一个事件，长条的宽度代表所花费的时间，越长花费越久；y轴表示调用堆栈，事件相互叠加时，较高的时间导致较低的事件。

   

   如果火焰图下方的调用太多可以使用前面提到的Disable JavaScript samples禁用js示例，这样就只能看见高级事件了。

   

3. 调用树
   在call tree当中我们可以清晰地看见调用堆栈以及其所花费的时间。

   

4. 查看交互
   在interactions中可以看见用户交互

   

5. frames
   可以准确的看见特定帧花了多少时间

   

未完待续