Dale St. Marthe
使用性能监控器可快速了解网站的加载和运行时性能。
概览
性能监视器面板会显示一个时间轴，其中会以图表的形式实时显示性能指标。点击相应指标即可显示或隐藏该指标。然后，观察图表在您与应用互动时如何变化。
性能监控器会跟踪以下指标：
- CPU 使用率。
- JavaScript 堆大小。
- 网页上的 DOM 节点、JavaScript 事件监听器、文档和框架的总数。
- 每秒重新计算布局和样式的时间。
打开“性能监视器”面板
如需打开性能监视器面板，请执行以下操作：
- 打开开发者工具。
- 按以下键打开命令菜单：
- macOS：Command+Shift+P
- Windows、Linux、ChromeOS：Ctrl+Shift+P
- 开始输入
Performance monitor，选择显示性能监视器，然后按 Enter 键。开发者工具会在开发者工具窗口底部显示性能监视器面板。
或者，在右上角，依次选择 更多选项 > 更多工具 > 性能监视器。
使用“性能监控”面板
性能监控器可让您大致了解网站的运行时性能。
观察指标值在您与网站互动时发生的变化，可以发现改进机会。
效果监控器的一项实用功能是，它会在整个网页导航过程中保持不变。因此，作为前端开发者，您可以打开性能监视器，滚动浏览网站，并密切关注 DOM 节点和 布局/秒指标，以避免布局抖动等问题。
如果用户报告您的网站加载缓慢，性能监控器可以帮助您找出问题所在。
例如，CPU 使用率大幅上升可能表明代码效率不高。通常，如果网页包含大量 JS 事件监听器，则重构代码并减少这些监听器数量以释放内存可能有益。
如果您刚刚开始分析性能，建议您先使用 Lighthouse 面板，然后再使用性能面板或性能监控器进行进一步调查。