内存泄漏的排查
...大约 2 分钟
1.浏览器内存泄漏排查 面试速记卡片
（直接背，面试张口就来）
一、浏览器垃圾回收与泄漏原理
浏览器的垃圾回收机制基于可达性分析：无法被根对象访问到的对象，会被自动回收。
内存泄漏：对象本应被回收，但因存在无效引用，导致无法被 GC 标记为 “不可达”，长期占用内存，造成页面卡顿、崩溃。
二、高频内存泄漏场景（一眼识别）
定时器 / 事件监听未销毁：组件卸载时，
setInterval、addEventListener未清除，回调函数持有组件引用。DOM 引用未释放：DOM 元素被删除，但 JS 中仍保留对它的引用（如全局变量存储），导致无法回收。
闭包持有大对象：闭包意外引用了大对象（如 DOM、数组），导致对象无法被回收。
全局变量滥用：挂载在
window上的变量未清理，生命周期与页面一致，长期占用内存。第三方库实例未销毁：如图表、地图实例，组件卸载时未调用
destroy()方法。
三、标准排查流程（面试满分答案）
确认泄漏现象：用 Chrome DevTools →
Performance面板录制，观察内存曲线是否只升不降。定位泄漏对象：打开
Memory面板，在关键节点（如组件挂载 / 卸载）打堆快照。分析引用链：对比两次快照，找到持续增长的对象，查看其引用链，定位泄漏源头。
修复并验证：切断无效引用，修改代码后，重新打堆快照验证内存是否正常回落。
四、根治写法（高手标配）
组件销毁时，清定时器、解绑事件、销毁第三方实例。
对不用的 DOM 引用，**手动置为 **
**null**，解除引用关系。避免闭包意外持有大对象，减少不必要的引用。
存储对象时优先使用
WeakMap/WeakSet，利用弱引用特性，让对象能被自动回收。
一句话总结
内存泄漏的本质是无效引用未释放，排查靠 Chrome 的 Performance+Memory 面板，根治靠规范编码和主动清理。
2.图
赞助
