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