Dale St. Marthe
使用“效果”面板分析网站的效果。
概览
Performance 面板可让您记录 Web 应用的 CPU 性能配置文件。分析配置文件，找出潜在的性能瓶颈和优化资源使用的方法。
使用性能面板可执行以下操作：
- 记录性能配置文件。
- 更改拍摄设置。
- 分析效果报告。
有关如何提高网站性能的全面指南，请参阅分析运行时性能。
打开“性能”面板
如需打开 Performance 面板，请打开开发者工具，然后从顶部的一组标签页中选择 Performance。
或者，也可以按照以下步骤使用命令菜单打开性能面板：
- 打开开发者工具。
- 按如下键打开命令菜单：
- macOS：Command + Shift + P
- Windows、Linux、ChromeOS：Ctrl + Shift + P
- 开始输入
Performance panel，选择显示性能面板，然后按 Enter 键。
录制效果概况
准备录制时，Performance 面板将为您提供以下选项：
更改拍摄设置
通过捕获设置，您可以更改开发者工具捕获性能记录的方式，并在报告中提供更多信息。点击拍摄设置 设置，以访问拍摄设置菜单。
从拍摄设置菜单中选择以下选项：
- 停用 JavaScript 示例：禁止记录在记录期间调用的主轨道中显示的 JavaScript 调用堆栈。将降低性能开销。
- 启用高级绘制插桩（慢速）：捕获高级绘制插桩。严重影响了性能。
- 启用 CSS 选择器统计信息（慢）：捕获 CSS 选择器统计信息。严重影响了性能。
- CPU 节流：模拟更慢的 CPU 速度。
- 网络节流：模拟较慢的网速。
- 硬件并发：配置
navigator.hardwareConcurrency报告的值。
分析效果报告
如需查看有关如何使用 Performance 面板的完整指南，请参阅分析性能记录。
下面介绍了该指南中的主题分组以及其他实用文档：
如需了解如何浏览报告，请执行以下操作：
要了解如何专注于对工作流程至关重要的方面，请按以下步骤操作：
如需了解“自下而上”“调用树”和“事件日志”标签页，请执行以下操作：
如需了解如何分析报告，请执行以下操作：
- 查看主线程活动
- 阅读火焰图
- 查看屏幕截图
- 查看内存指标
- 查看部分录制内容的时长
- 在重新计算样式事件期间分析 CSS 选择器性能
- 使用“性能”面板分析 Node.js 性能
- 分析每秒帧数 (FPS)
- 时间轴事件参考文档
借助这些面板提升性能
了解可以帮助您提升网站性能的其他面板：