简介
Chrome 调试工具中的 Performance 面板是用来查看页面在浏览器运行时的性能表现，而不是加载页面时候的表现。
说明
- 本文为自己阅读文章的笔记，如果想详细了解该面板的功能，建议点此 阅读原文。
- 本文截图及功能说明，使用的 Chrome 版本为：
72.0.3626.119（正式版本） （32 位）；
功能
- 模拟移动设备的CPU；
- 记录运行时的性能表现；
- 定位影响性能的代码所在位置。
使用说明
调试 Demo：googlechrome.github.io/devtools-sa…
工具栏简介
- 点击【设置按钮】展示更多设置；
- Network 模拟网络环境；
- CPU 模拟移动设备 CPU ；
- 点击左上角录制按钮开始录制性能。
性能分析
- FPS 数据，红色说明此帧存在严重问题，绿色的长条越高，说明 FPS 越高，用户体验越好。
- CPU 运行数据，与数字 5 中的颜色是对应的。各种颜色代表该时间段，CPU 在处理上花费的时间。
- 鼠标悬停，可看到当前帧的 PFS 。
- 主线程运行状况，X 轴代表时间， Y 轴代表调用栈，上面的 event 调用下面的 event 。
定位代码
- 事件长条的右上角，如果出现了红色小三角，说明这个事件是存在问题的，点击可以在 Summary 面板看到详细信息。
- 点击 reveal 可以定位到问题代码的位置。
Tips
- 使用 Chrome 的匿名模式，可以保证页面在一个相对干净的环境下运行，避免 Chrome 插件对调试的影响。
- 打开控制台，快捷键 Ctrl+Shift + P 打开命令菜单，输入 Show Rendering ，点击 FPS meter ，显示 FPS 实时面板。
