Devtools 性能面板

[coconilu]

性能面板

使用 Chrome DevTools 的 Performance 面板（之前叫 Timeline 面板）可以记录和分析您的应用在运行时的所有活动。 这里是开始调查应用中可觉察性能问题的最佳位置。

面板介绍

Performance 面板包含以下四个窗格：

1. Controls。开始记录，停止记录和配置记录期间捕获的信息。
2. Overview。 页面性能的高级汇总。更多内容请参见下文。
3. 火焰图。 CPU 堆叠追踪的可视化。
4. Details。选择事件后，此窗格会显示与该事件有关的更多信息。 未选择事件时，此窗格会显示选定时间范围的相关信息。

Controls 窗格

我们可以按 Record 按钮采集一段时间内的性能数据。

记录提示：

1. 尽可能保持记录简短。简短的记录通常会让分析更容易。
2. 避免不必要的操作。避免与您想要记录和分析的活动无关联的操作（鼠标点击、网络加载，等等）。例如，如果您想要记录点击 Login 按钮后发生的事件，请不要滚动页面、加载图像，等等。
3. 停用浏览器缓存。记录网络操作时，最好从 DevTools 的 Settings 面板或 Network conditions 抽屉式导航栏停用浏览器的缓存。
4. 停用扩展程序。Chrome 扩展程序会给应用的 Timeline 记录增加不相关的噪声。 以隐身模式打开 Chrome 窗口或者创建新的 Chrome 用户个人资料，确保您的环境中没有扩展程序。

我们还可以勾选工具栏上的Screenshots，在记录期间捕捉屏幕截图。

Overview 窗格

Overview 窗格包含以下三个图表：

1. FPS。每秒帧数。绿色竖线越高，FPS 越高。 FPS 图表上的红色块表示长时间帧，很可能会出现卡顿。
2. CPU。 CPU 资源。此面积图指示消耗 CPU 资源的事件类型。
3. NET。每条彩色横杠表示一种资源。横杠越长，检索资源所需的时间越长。 每个横杠的浅色部分表示等待时间（从请求资源到第一个字节下载完成的时间）。

CPU面积图中的彩色表示：

1. HTML 文件为蓝色。
2. 脚本为黄色。
3. 样式表为紫色。
4. 媒体文件为绿色。
5. 其他资源为灰色。

可以在Timeline上调整区间，火焰图会自动缩放匹配。

火焰图

火焰图可以帮助我们分析JavaScript堆栈，会显示调用的每个JavaScript函数。
分析绘制

时间线事件参考：

Details 窗格

1. Summary
2. Bottom-Up
3. Call Tree
4. Event Log

参考

如何使用 Timeline 工具
时间线事件参考
分析运行时性能
诊断强制同步布局