使用Chrome DevTools分析内存快照和监控内存趋势，结合代码检查全局变量、事件监听、定时器等常见泄漏源，利用WeakMap/WeakSet避免强引用，及时清理对象引用可有效排查与防止内存泄漏。
JavaScript 内存泄漏会导致页面运行变慢甚至崩溃，尤其在长时间运行的单页应用中更为明显。排查内存泄漏需要结合浏览器开发者工具和代码逻辑分析，找出未被正确释放的对象引用。
1. 使用 Chrome DevTools 检测内存快照
Chrome 的 Memory 面板是排查内存泄漏的核心工具。
• 打开 Chrome 开发者工具，切换到 Memory 面板• 在操作页面前后分别点击 Take heap snapshot 生成堆快照
• 对比多个快照，查看是否有对象持续增长但未释放
• 关注 Detached DOM trees（分离的 DOM 节点），这是常见泄漏源
• 查看 Constructor 列表中实例数量异常增多的构造函数
2. 监控内存使用趋势
通过任务管理器或 Timeline 记录内存变化，判断是否存在持续增长。
• 在 DevTools 中使用 Performance 面板录制一段时间的操作• 观察 Memory 图表中的 JS 堆大小、DOM 节点数、监听器数量
• 如果堆内存只增不减，可能存在泄漏
• 反复执行相同操作（如打开关闭弹窗），看内存是否回落
3. 常见泄漏场景与代码检查
多数泄漏源于意外的全局引用或未清理的回调。
• 全局变量滥用：避免隐式创建全局变量，如忘记加var/let/const• 事件监听未解绑：移除 DOM 前应调用
removeEventListener• 定时器引用外部对象：
setInterval 或 setTimeout 回调持有组件引用时需手动清除• 闭包引用过大对象：确保闭包内不长期持有不需要的数据
• 观察者模式未取消订阅：使用
自定义事件系统时，注意销毁订阅关系
4. 利用 WeakMap / WeakSet 避免强引用
这些集合不会阻止垃圾回收，适合缓存与关联数据。
• 使用 WeakMap 存储私有数据，键为对象且可被回收• 使用 WeakSet 标记对象而不影响其生命周期
• 避免用普通 Map/Set 以对象为键，容易造成泄漏
基本上就这些方法。结合工具监控和代码审查，大多数内存泄漏都能定位。关键是养成及时清理引用的习惯，尤其是在组件销毁时。
