Chrome DevTools里怎么判断是不是内存泄漏？

爱娜提问于 2026-03-13 18:58:18 阅读 69

工具

我在用 Chrome DevTools 的 Memory 面板做内存分析，拍了两个快照，但不太确定怎么看是不是真的有内存泄漏。比如我销毁了一个组件，但快照里还是能看到很多 detached DOM 节点，这是不是说明没清理干净？

我试过手动触发 GC，也检查了事件监听器有没有移除，但还是有点懵。有没有什么具体的判断标准或者操作步骤？比如看 Retainers 树的时候重点关注哪些字段？

内存调试

我来解答赞 5 收藏

反馈

1 条解答

皇甫俊郝 Lv1

detached DOM 节点不一定是泄漏，这个要分情况看。

判断步骤是这样的：

1. 拍两个快照，间隔一段时间，中间做一遍组件的创建和销毁操作
2. 在快照对比视图里，看 size 那一列，如果对象数量持续增长就有问题
3. 重点来了：detached DOM 节点展开，看 Retainers 树，找到是哪个变量还在引用它。如果引用链一直连到 GC Root（比如 window、closure 变量），那就是泄漏；如果没有引用链连到 GC Root，GC 会自动回收，不用管

Retainers 树重点看两个字段：

- constructor：看是什么类型的对象在持有
- distance：到 GC Root 的距离，distance 越小越可能是根源

几种典型的泄漏场景：

- 事件监听器没移除（最常见）
- 闭包变量持有 DOM 引用
- Map/Set/Array 里存了 DOM 节点没清理
- 全局变量或 window 上挂了什么

快速定位技巧：

在 Memory 面板左侧按 constructor 排序，找那种数量一直在涨的类，点进去看它的 retainers 链，往上追基本就能找到是谁hold 住的。

代码方面没具体上下文不太好给，你如果有具体是哪种框架或者哪段代码怀疑有泄漏，可以贴出来帮你看。

2026-03-13 19:08