“性能监控”面板

Dale St. Marthe
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 面板,然后使用性能面板或性能监控进行深入研究。