Performance Monitor可实时监控JS堆内存与DOM节点数变化：开启后显示四条曲线，正常应小幅波动，若JS堆持续爬升且GC后不回落、DOM节点单向增长或同步阶梯式抬升，则存在内存泄漏嫌疑。
打开 Chrome DevTools 后，直接启用 Performance Monitor 就能实时看到 JS 堆内存和 DOM 节点数的变化趋势，不需要录制、也不用切面板——它就挂在底部状态栏附近，刷新即可见。
快速开启性能监视器
在任意 DevTools 面板（比如 Elements 或 Console）右下角，找到三个竖点（⋯）→ 点击 → 选择 More Tools > Performance monitor。窗口会以小浮层形式固定在 DevTools 底部，持续显示四条曲线：
- JS heap：括号内数字是当前可到达对象占用的 JS 堆内存（单位 MB），这是你要盯住的核心值
- DOM Nodes：当前页面所有已挂载的 DOM 元素总数
- CPU：辅助判断是否因脚本执行导致内存增长
- Listeners：事件监听器数量，异常升高常伴随 DOM 泄漏
看懂两条关键曲线的“健康信号”
正常情况不是数值绝对静止，而是有节奏地小幅波动——每次操作后上升，随后垃圾回收（GC）触发，曲线回落至接近原基线。重点识别以下异常模式：
- JS heap 持续爬升、GC 后不回落：说明对象未被释放，大概率存在闭包引用、全局变量或定时器持有引用
- DOM Nodes 单向增长、不下降：比如反复打开关闭弹窗，节点数只增不减，大概率是 removeChild 未调用，或 Vue/React 组件销毁逻辑缺失
- 两条曲线同步阶梯式抬升（如每点一次按钮就跳一截）：基本可锁定对应交互代码段
配合简单操作验证泄漏嫌疑
不用写代码也能快速试探：
- 在 Console 输入 $$('*').length 查当前总节点数，操作前后各执行一次，对比差值
- 点击 Performance Monitor 浮层里的垃圾桶图标（强制 GC），观察 JS heap 是否明显下降；若几乎不动，说明有强引用阻止回收
- 在 Elements 面板中按 Ctrl+F 搜索 .detached，查看是否存在脱离文档却仍被 JS 引用的 DOM 节点（需先拍过堆快照才可见）
注意几个易忽略的细节
Performance Monitor 是实时轻量监控，但它不记录历史，也不展示对象细节：
- 它显示的 JS heap 是“可到达对象”大小，不包括已标记但尚未回收的垃圾
- DOM Nodes 计的是全部节点（含 textNode、commentNode），不是仅 visible 元素
- 如果页面用了 WebAssembly 或大量 Canvas，原生内存（Native Memory）可能上涨，但 JS heap 不变——这时要结合 Chrome 任务管理器看总内存
