首先打开Chrome开发者工具并选择“更多工具”中的“性能监控器”，可实时查看FPS、CPU、内存等关键指标；通过观察图表波动判断性能瓶颈，如FPS下降或内存持续上升；支持自定义监控指标和重置视图以便针对性分析。
如果您希望深入了解网页在运行时的资源消耗和性能表现，Chrome浏览器的性能监控器（Performance Monitor）可以提供实时的可视化数据。以下是使用该工具进行监控的详细步骤。
本文运行环境：MacBook Pro，macOS Sonoma
一、打开开发者工具并进入性能监控器
性能监控器是Chrome开发者工具的一部分，需要先打开开发者工具才能访问。它能实时显示CPU、内存、FPS等关键性能指标，帮助开发者快速识别页面是否存在性能瓶颈。
1、使用快捷键 Cmd+Option+I 打开开发者工具。
2、点击开发者工具顶部菜单中的 “更多工具” 选项。
3、在下拉菜单中选择 “性能监控器”，即可在开发者工具面板中加载性能监控器界面。
二、理解性能监控器的实时图表
性能监控器提供了多个实时更新的图表，每个图表代表一个关键性能维度。通过观察这些图表的波动，可以判断页面在用户交互或加载过程中的资源占用情况。
1、FPS（每秒帧数）图表：显示页面当前的渲染帧率。绿色表示帧率良好（接近60 FPS），黄色或红色表示帧率下降，可能出现卡顿。
2、CPU 使用率图表：展示JavaScript、样式计算、布局、绘制等任务对CPU的占用情况。持续高占用可能意味着脚本或渲染逻辑需要优化。
3、JS 堆内存图表：反映JavaScript对象占用的内存大小。如果内存曲线持续上升而不回落，可能存在内存泄漏。
4、DOM 节点数图表：显示当前页面中DOM节点的总数。过多的DOM节点会影响渲染性能。
5、文档数量图表：指示当前打开的document对象数量，包括iframe等嵌套文档。
6、事件监听器数量图表：统计页面上注册的事件监听器总数，过多的监听器可能导致内存和性能问题。
三、自定义监控指标和重置视图
性能监控器允许用户根据需要开启或关闭特定的监控指标，以便更专注于当前关注的性能问题。同时，可以随时清除历史数据以重新开始监控。
1、在性能监控器界面下方，点击 “+ 添加指标” 按钮。
2、从弹出的列表中选择希望监控的指标，例如只关注内存和FPS，可以取消勾选其他不相关的指标。
3、若要清除现有图表数据并重新开始监控，点击界面左上角的 圆形刷新按钮，即可重置所有图表。
