“性能监控”面板

Dale St. Marthe

使用性能监控器快速了解网站的加载和运行时性能。

概览

效果监控面板会显示一个时间轴，以图表的方式实时绘制效果指标。点击某个指标即可将其显示或隐藏。然后，观察图表在您与应用互动时的变化情况。

性能监控器会跟踪以下指标：

• CPU 使用率。
• JavaScript 堆大小。
• 页面上 DOM 节点、JavaScript 事件监听器、文档和框架的总数。
• 每秒重新计算布局和样式的次数。

打开“性能监控”面板

如需打开性能监控面板，请执行以下操作：

1. 打开开发者工具。
2. 按如下键打开命令菜单：
   • macOS：Command + Shift + P
   • Windows、Linux、ChromeOS：Ctrl + Shift + P
3. 开始输入 Performance monitor，选择显示性能监控器，然后按 Enter 键。DevTools 会在开发者工具窗口底部显示性能监控面板。

或者，选择右上角的 more_vert 更多选项 > 更多工具 > 性能监控。

使用“性能监控”面板

性能监控工具可让您大致了解网站的运行时性能。

通过观察指标值在与网站互动时的变化情况，可以发现改进机会。

性能监控的一项实用功能是，它会在整个网页导航过程中持续显示。因此，作为前端开发者，您可以打开性能监控器，滚动浏览其网站，并留意 DOM 节点和每秒布局数量指标，从而避免布局抖动等问题。

如果用户报告您网站上的加载速度缓慢，效果监控器可以帮助您找出存在问题的地方。

例如，CPU 使用率大幅激增可能是由代码效率低下造成的。通常情况下，如果网页包含大量 JS 事件监听器，重构代码并减少这些数量来释放内存可能会有所帮助。

如果您刚开始分析性能，建议您先使用 Lighthouse 面板，然后使用性能面板或性能监控进行深入研究。