Chrome 开发者工具 Performance 面板的简单介绍

简介

Chrome 调试工具中的 Performance 面板是用来查看页面在浏览器运行时的性能表现，而不是加载页面时候的表现。

说明

• 本文为自己阅读文章的笔记，如果想详细了解该面板的功能，建议点此 阅读原文。
• 本文截图及功能说明，使用的 Chrome 版本为： 72.0.3626.119（正式版本） （32 位）；

功能

• 模拟移动设备的CPU；
• 记录运行时的性能表现；
• 定位影响性能的代码所在位置。

使用说明

调试 Demo：googlechrome.github.io/devtools-sa…

工具栏简介

1. 点击【设置按钮】展示更多设置；
2. Network 模拟网络环境；
3. CPU 模拟移动设备 CPU ；
4. 点击左上角录制按钮开始录制性能。

性能分析

1. FPS 数据，红色说明此帧存在严重问题，绿色的长条越高，说明 FPS 越高，用户体验越好。
2. CPU 运行数据，与数字 5 中的颜色是对应的。各种颜色代表该时间段，CPU 在处理上花费的时间。
3. 鼠标悬停，可看到当前帧的 PFS 。
4. 主线程运行状况，X 轴代表时间， Y 轴代表调用栈，上面的 event 调用下面的 event 。

定位代码

1. 事件长条的右上角，如果出现了红色小三角，说明这个事件是存在问题的，点击可以在 Summary 面板看到详细信息。
2. 点击 reveal 可以定位到问题代码的位置。

Tips

1. 使用 Chrome 的匿名模式，可以保证页面在一个相对干净的环境下运行，避免 Chrome 插件对调试的影响。
2. 打开控制台，快捷键 Ctrl+Shift + P 打开命令菜单，输入 Show Rendering ，点击 FPS meter ，显示 FPS 实时面板。