JS 内存泄露的问题该如何排查？

参考答案：

1. 了解常见的内存泄露类型

• 全局变量：未声明的变量被添加到全局作用域。
• 闭包：长时间持有对外部作用域的引用。
• 事件监听器：未正确移除的事件监听器。
• 定时器：未清除的 setInterval 或 setTimeout。
• DOM 引用：移除 DOM 元素后仍有对其的引用。

2. 使用开发者工具进行排查

Chrome DevTools 提供了内存分析工具，可以帮助检测和修复内存泄露问题。

步骤：

1. 检查内存快照：

   • 打开 Chrome DevTools，转到 "Memory" 面板。
   • 使用 "Heap Snapshot" 生成内存快照，比较不同时间点的快照找出持续增长的对象。

2. 分析快照：

   • 查找未释放的内存对象，特别是意外增长的数组、对象等。
   • 查看 DOM 节点和 JavaScript 对象的引用链，识别意外的引用保留。

3. 监视内存分配：

   • 使用 "Allocation Timeline" 记录内存分配情况，观察是否存在不断增长的内存分配。

4. 使用“Find Leaks”工具：

   • 在 "Memory" 面板中，使用 "Heap Snapshot" 功能找到泄露的对象并分析其引用链。

4. 使用第三方工具

• Lighthouse：用于性能分析和内存泄露检测。

题目要点：

• 检查快照：使用开发者工具生成和分析内存快照。
• 监视分配：跟踪内存分配情况，识别异常。
• 使用工具：利用第三方工具和扩展进行深入分析。