识别内存泄漏的关键是观察JS Heap曲线回落基线是否持续抬高,正常应回落至稳定水平,异常则呈阶梯式上升;若连续3次以上且结束时内存超起点20%,结合Nodes和Listeners同步上升、GC回落幅度过小等现象,可确认存在泄漏。

识别异常增长的内存曲线,关键不是看“有没有上升”,而是看“升了之后落不落、落多少、落得稳不稳”。JS Heap 曲线在 Performance 面板中呈现为蓝色折线,它反映的是 JavaScript 堆内存的实时使用量,是判断泄漏最直接的视觉依据。
盯住 JS Heap 的“回落基线”是否持续抬高
正常页面操作会引发内存短暂上升(如创建对象、渲染图表),但触发垃圾回收(GC)后,应明显回落,且每次回落的最低点大致稳定在一个水平附近——这是健康内存行为的标志。
异常表现为:每执行一次相同操作(比如打开再关闭一个弹窗),JS Heap 的谷底都比上一次更高,形成肉眼可见的“阶梯式上升”。连续出现 3 次以上阶梯,且录制结束时内存比起点高超 20%,就是强泄漏信号。
结合 Nodes 和 Listeners 曲线交叉验证
绿色 Nodes 曲线代表当前存活的 DOM 节点数,橙色 Listeners 表示已绑定但未移除的事件监听器数量。这两条线若与 JS Heap 同步阶梯上升,说明泄漏很可能来自:
- DOM 节点被移除后,JS 仍持有引用(如
const el = document.getElementById('x'); el.remove();但el变量未置空) - 未清理的 scroll/resize/input 监听器,尤其在单页应用路由切换后仍残留
关注 GC 后的回落幅度是否过小
当 JS Heap 上升后出现垂直向下的尖锐下降,那是 GC 在工作。但如果每次下降幅度极小(例如只回落 1–2MB),或回落之后很快又冲高,说明大量对象无法被回收——它们被意外保留着,比如闭包捕获了大数组、定时器回调里引用了组件实例、或全局变量悄悄挂载了数据。
此时可配合 performance.memory 手动验证:
操作前执行 performance.memory.usedJSHeapSize 记下初始值;重复操作 5 次后再次执行,若增长超初始值 30% 且持续放大,基本可确认泄漏在积累。
排除干扰:区分波动与趋势
短时毛刺、单次大幅跃升(如加载高清图片、解析大 JSON)不等于泄漏。重点观察的是「可复现、有规律、随操作次数线性累积」的趋势。静置 10 秒内存应基本持平;反复操作后,曲线不该像爬楼机一样一阶一阶往上走。
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











