Chrome DevTools Memory面板通过堆快照对比（Comparison视图）定位内存泄漏，重点关注Retained Size大且持续增长的构造函数；需手动触发GC、用Filter筛选、Reveal in Console查引用链；闭包和未清理的事件监听器易致泄漏；WeakMap/WeakRef可安全缓存对象；Performance Monitor与Allocation Instrumentation配合可实时监测并精确定位分配泄漏。
Chrome DevTools 的 Memory 面板怎么用
直接打开 Memory 面板（More Tools → Memory），选中 Heap snapshot，点击录制按钮，操作页面后点击停止，就能生成堆快照。关键不是“拍一张”，而是对比——比如在执行某段逻辑前后各拍一次，用 Comparison 视图看新增对象。
常见误操作：只看 Summary 视图里“构造函数”排序，却忽略 Retained Size 列；真正该关注的是那些 Retained Size 大、且两次快照间持续增长的构造函数，比如 Closure、Array、自定义类名。
- 触发 GC 前先手动点
Collect garbage按钮，避免干扰判断 - 筛选时用
Filter → “(string)”或“(closure)”快速定位可疑引用 - 右键某个对象 →
Reveal in Console，可直接在控制台打印其引用链
闭包和事件监听器为什么容易导致内存泄漏
闭包本身不等于泄漏，但当它意外持有对 DOM 节点、大数组或全局对象的强引用，且这些引用本该被释放时，问题就出现了。典型场景是：组件卸载后，定时器或事件监听器没清除，而它们内部又引用了组件实例（比如 this.state 或 ref）。
事件监听器泄漏更隐蔽：用 addEventListener 绑定的回调若没配对调用 removeEventListener，即使 DOM 节点被 remove()，只要监听器还活着，节点就无法被回收。
立即学习“Java免费学习笔记（深入）”；
- 用
addEventListener时尽量传具名函数，方便后续removeEventListener - React 中 useEffect 清理函数必须返回一个函数，且该函数里要清除所有副作用（
clearInterval、removeEventListener） - 避免在闭包中直接引用整个
this，改用解构提取必要字段：const { data } = this
WeakMap 和 WeakRef 怎么帮上忙
WeakMap 的键必须是对象，且不阻止垃圾回收——适合做“元数据缓存”，比如给 DOM 节点打标记而不影响其生命周期。一旦节点被移除，对应 WeakMap 条目自动消失。
WeakRef 更底层：它包裹一个对象，但不延长其存活时间；配合 obj?.deref() 使用，能安全地“尝试访问”，哪怕对象已被回收也不会报错。
const cache = new WeakMap();
function decorateNode(node) {
if (!cache.has(node)) {
cache.set(node, { processed: true });
}
return cache.get(node);
}
// node 移除后，cache 自动清理对应项，无需手动干预
-
WeakMap不能遍历，也不能用size查数量，这是设计使然 -
WeakRef在 Node.js 14.6+ / Chrome 84+ 才可用，旧环境需降级为WeakMap+ 状态检查 - 不要用
WeakRef包裹基础类型（string、number），只接受对象
Performance Monitor 和 Allocation Instrumentation on Timeline 怎么配合查泄漏
Performance Monitor（小仪表盘图标）实时显示 JS 堆内存、DOM 节点数、监听器数。如果操作后这些数字不回落，基本可以断定有泄漏。接着切到 Performance 面板，勾选 Allocation instrumentation on timeline，录制交互过程，重点关注“蓝色小方块”——每个代表一次新对象分配。
关键技巧：把鼠标悬停在蓝色方块上，看右侧 Summary 面板里的 Constructor 和 Size；连续出现同类型、大小相近的小方块，大概率是循环创建未释放的对象（如反复 new Class() 却没销毁）。
- 录制时关闭其他标签页，减少干扰
- 勾选
JS heap和Nodes，让曲线图同时显示内存与 DOM 变化趋势 - 如果
JS heap曲线阶梯式上升，而Nodes平稳，说明泄漏源在 JS 对象，不是 DOM
console.log(this) 在开发环境可能让整个组件树保留在内存里；还有第三方库的内部缓存（比如某些图表库会把配置对象深拷贝后长期持有），得靠快照里的 retained by 展开一层层点进去才看得见。 
