JavaScript中的内存泄漏与排查方法

描述
内存泄漏指程序中已分配的内存由于某些原因未能被释放，导致内存占用持续增长，最终可能引发性能下降或程序崩溃。在JavaScript中，虽然垃圾回收机制（GC）会自动管理内存，但不当的代码仍会导致内存泄漏，尤其在长期运行的应用中更为突出。

内存泄漏的常见场景

1. 意外全局变量：未声明的变量或刻意定义的全局变量会一直存在于全局作用域，直到页面关闭。
2. 未被清除的定时器或回调：setInterval 或事件监听器未及时清理，导致关联对象无法回收。
3. 闭包滥用：函数内部引用外部变量，但闭包长期存在时，相关变量会一直保留。
4. DOM引用残留：已移除的DOM元素仍被JavaScript对象引用，阻止GC回收其内存。
5. 缓存失控：缓存数据无限增长，未设置清理机制。

排查方法

1. 使用浏览器开发者工具：

   • 打开Chrome DevTools的 Memory 面板，利用 Heap Snapshot 功能拍摄堆内存快照。对比操作前后的快照，查看对象数量的异常增长。
   • 使用 Performance 面板记录内存占用曲线，观察内存是否持续上升。

2. 识别泄漏模式：

   • 在Heap Snapshot中筛选 Detached DOM tree，检查是否存在已脱离DOM树但仍被引用的元素。
   • 关注特定类（如自定义类）的实例数量是否只增不减。

3. 代码审查与修复：

   • 检查全局变量：使用严格模式（"use strict"）避免意外全局变量。
   • 及时清理资源：在不需要时调用 clearInterval、removeEventListener。
   • 优化闭包：避免在闭包中保留不必要的引用。

示例：定时器泄漏与修复

// 泄漏示例  
function startProcess() {  
  setInterval(() => {  
    const data = getData(); // 每次执行都积累数据  
  }, 1000);  
}  

// 修复：提供清理接口  
let timerId;  
function startProcess() {  
  timerId = setInterval(() => { /* ... */ }, 1000);  
}  
function stopProcess() {  
  clearInterval(timerId); // 明确清除定时器  
}  

进阶工具

• 使用 WeakMap 或 WeakSet 存储临时引用，其键名是弱引用，不会阻止GC回收对象。
• 第三方工具如 heapdump（Node.js）或 memwatch-next 辅助监控内存变化。

总结
内存泄漏排查需结合工具分析和逻辑推理。重点在于确保对象的生命周期可控，及时解除不再需要的引用。长期运行的应用应定期进行内存检查。