JS内存泄漏不会报错,而是表现为内存占用持续上涨、页面卡顿、切换路由后内存不回落;可用Chrome Memory面板通过堆快照比对Detached节点、Closure等对象是否只增不减,并查看Retaining Path定位强引用源。

JS 中内存泄漏本身不会直接抛出报错信息,它不触发 SyntaxError、TypeError 或 ReferenceError 这类运行时错误。你不会在控制台看到类似 "Memory leak detected" 的提示——浏览器和 V8 引擎不会主动“报错”,只会默默累积占用,直到卡顿、崩溃或被开发者工具揪出来。
所以,“速查表”不是记错误文案,而是记泄漏发生时的典型现象、监控信号和调试线索。以下四类最实用,按排查逻辑组织,好记、好用:
内存占用曲线持续单边上涨
- 怎么看:Chrome Performance 面板开启 Memory 录制 → 操作(如反复打开/关闭弹窗)→ 观察 JS Heap 曲线
-
关键信号:
- 多次操作后,内存峰值不回落,呈阶梯式上升
- 刷新页面后内存未归零(仍高于初始 baseline)
- 曲线没有周期性“锯齿”(即缺少 GC 回落),说明垃圾回收没起效
堆快照中 Detached DOM tree 明显增多
-
怎么看:Memory 面板 → Take heap snapshot → 切换到 Summary 视图 → 筛选
Detached -
常见原因:
-
element.remove()或innerHTML = ''后,仍有 JS 变量(如const cachedNode = document.getElementById('x'))持有该节点 - 事件监听器未解绑,闭包中保留了对已移除 DOM 的引用
- Vue/React 组件卸载后,第三方库(如图表、编辑器)未调用
.destroy()
-
快照 Comparison 视图里 Closure / Array / Object 持续新增
-
怎么看:拍两个快照(操作前 + 操作后)→ Comparison 视图 → 查看
# New列 -
重点关注:
-
(closure)构造函数数量增长 → 检查是否返回了未清理的闭包函数(尤其带大数组、缓存对象) -
HTMLDivElement、EventListener等 DOM 相关类型增长 → 往往对应未清除的监听器或强引用 -
Array或Object实例数飙升且Retained Size很大 → 查看其Retaining Tree,找谁在“拽住”它
-
控制台手动检查 performance.memory(仅 Chrome)
-
怎么用:
console.log(performance.memory.usedJSHeapSize / 1024 / 1024 + ' MB');
-
辅助判断:
- 连续执行相同操作 5 次,每次
usedJSHeapSize增长 > 1–2 MB 且不回落 → 高度可疑 - 注意:该 API 在非 Chrome 浏览器不可用,仅作开发阶段粗筛
- 连续执行相同操作 5 次,每次
不复杂但容易忽略。真正的问题往往不在报错,而在“没报错却越来越慢”。


















