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