本文将介绍如何使用chrome DevTool来记录页面的性能
- 在隐身模式下打开Chrome，可以减少其他扩展程序的影响
- 调出控制台选择 Performance 项
记录运行时性能
- 点击录制按钮（红色框内）开始录制
- 触发页面点击/滚动发生交互，DevTools将记录下所有由交互而产生的页面活动
- 点击 Stop 停止本次录制
记录加载性能
- 点击红色框内按钮，页面将重新加载，同时DevTools会开始记录性能指标，然后在加载完成后自动停止记录。
保存/加载性能文件
下载本次性能文件
- 点击黄色框内按钮，可以将本次记录的页面性能以文件的形式保存下来
上传历史性能文件
- 点击红色框内按钮，可以上传历史保存过的页面性能文件
历史文件对比
- 点击蓝色框内的选择器，绿色下拉框内会出现本次上传的不同时间段的页面性能文件，选择其中一个文件，可以查看当时录制的页面性能片段，这样就可以很方便的做对比啦
使用屏幕截图功能
- 在录制之前，勾选Screenshots选项，录制结束后，鼠标悬浮至黄色框内区域时，就可以查看每一帧的屏幕截图啦，可以用于参考实时页面状态
记录页面内存使用情况
- 在录制之前，勾选Memory选项，录制结束后，会显示页面在这段运行时间内的内存情况和document、DOM节点数、事件监听数的计数（蓝色和绿色框内）
- 我们可以通过memory的面报查看是否有内存泄漏等问题，如果内存占用基本平稳，接近水平，就说明不存在内存泄漏。
记录时强制垃圾回收
- 在录制时，点击红色框内垃圾桶按钮，如上图，我一共点击了两次，可以看到，点击之后的内存被立即清理掉了。
更多设置
点击按钮栏最右侧的设置按钮可以设置更多
- 是否禁用JavaScript
- 是否启用高级绘制工具
- 设置网络情况
- 设置CPU速度
