你是如何排查js内存泄漏的？

排查 JavaScript 内存泄漏是一个常见的前端性能优化任务。以下是一些常用的方法和工具：

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

• Memory 标签页: 这是 Chrome DevTools 中最常用的工具。

  • Heap Snapshots: 可以捕获 JavaScript 堆的快照，比较不同时间点的快照，找出哪些对象没有被垃圾回收，从而定位内存泄漏的来源。 关注 detached nodes, 以及持续增长的对象数量。
  • Allocation instrumentation on timeline: 可以记录内存分配的时间线，帮助识别内存分配过快或不必要的对象。
  • Memory allocation profiles: 可以显示内存分配的统计信息，帮助识别哪些函数或代码段分配了最多的内存。

• Performance 标签页: 记录页面的性能时间线，可以观察内存的使用情况，识别内存泄漏导致的性能下降。 寻找内存持续增长的趋势。

2. 使用专门的内存泄漏检测库:

• LeakCanary (Android): 虽然主要用于 Android 开发，但其核心思想可以借鉴到前端开发中。 可以监听特定对象的销毁，如果对象没有被正确销毁，则会发出警告。

3. 代码审查和常见内存泄漏模式:

• 意外的全局变量: 未声明的变量会自动成为全局变量，导致无法被垃圾回收。 使用 'use strict' 可以避免这种情况。
• 被遗忘的计时器或回调函数: setInterval 和 setTimeout 如果没有被 clearInterval 和 clearTimeout 清除，会一直持有对回调函数的引用，导致回调函数中的对象无法被回收。
• 分离的 DOM 节点: 如果 DOM 节点从 DOM 树中移除，但仍然被 JavaScript 变量引用，则该节点及其子节点无法被回收。
• 闭包: 闭包可以导致外部函数的变量被内部函数引用，如果内部函数的生命周期比外部函数长，则外部函数的变量无法被回收。 需要注意闭包中的变量作用域。

排查步骤示例:

1. 打开 Chrome DevTools，进入 Memory 标签页。
2. 进行一系列操作，模拟可能导致内存泄漏的场景。
3. 拍摄多个 Heap Snapshots，比较不同时间点的快照，观察哪些对象的内存占用持续增长。
4. 使用 Allocation instrumentation on timeline 或 Memory allocation profiles 进一步分析内存分配情况。
5. 根据分析结果，结合代码审查，找出内存泄漏的具体原因并进行修复。
6. 重复步骤 2-5，验证修复是否有效。

一些额外的提示:

• 简化测试用例: 将问题代码隔离出来，创建一个简单的测试用例，更容易定位问题。
• 关注 detached nodes: 在 Heap Snapshots 中，特别关注 detached nodes，它们通常是内存泄漏的罪魁祸首。
• 使用 WeakMap 或 WeakSet: 对于需要缓存大量数据的场景，可以考虑使用 WeakMap 或 WeakSet，它们不会阻止垃圾回收。

通过结合以上方法和工具，可以有效地排查和解决 JavaScript 内存泄漏问题，提升前端应用的性能和稳定性。