如何避免JS内存泄漏

Ja vaScript 内存泄漏，说白了就是在代码运行过程中，分配出去的内存没被正常回收，日积月累，应用占用的内存越堆越高，最终导致页面卡顿、响应迟缓，甚至直接崩溃。这个问题虽然老生常谈，但在实际项目里稍不留神就会踩坑。下面整理的几点经验，应该能帮你避开大部分常见的雷区。

1. 别让全局变量满天飞：全局变量的生命周期贯穿整个应用，只要应用不关，它就一直在那占着内存。能局部就局部，实在需要全局的，用完记得手动置 null。

2. 闭包虽好，但要留个心眼：闭包能让你访问外层作用域的变量，这确实方便，但也很容易让那些变量一直“活着”。当你不再需要某个闭包时，尽快把它的引用清掉——置 null 是最直接的办法。

3. 事件监听器，绑了就要解：给 DOM 元素绑了事件监听器，后来又把这个元素从页面移除了，这时候如果监听器没一并解绑，垃圾回收就没法正常工作。一定要养成配对绑定的习惯，移除元素前先 removeEventListener。

4. 循环引用是隐形杀手：两个对象互相指着对方，就会形成循环引用。现代浏览器的垃圾回收器已经能处理一部分这种情况，但最好还是主动避免，或者在不再需要时手动断开引用链。

5. 用好 WeakMap 和 WeakSet：这两个数据结构最大的特点就是“弱引用”——它们不会阻止垃圾回收器回收键或值。当你处理大量临时数据时，用它们来存放缓存或关联信息，既方便又安全。

6. 定期给代码做个体检：没事就翻翻代码，看看有没有遗漏的引用或者没释放的资源。浏览器开发者工具（比如 Chrome DevTools）的 Performance 和 Memory 面板，是定位泄漏的好帮手。

7. 内存分析工具值得投资：像 Memwatch-next、heapdump 这类工具，能帮你实时监控内存使用情况，把可疑的代码揪出来。对性能要求高的项目，早点用上会更省心。

8. 别滥用 setTimeout 和 setInterval：这两个定时器如果处理不好，很容易造成内存泄漏——尤其是在大数据量场景下，定时器回调里引用了大量变量，一直不清理。能用 requestAnimationFrame 就尽量用后者，实在要用定时器，记得及时清除。

9. 数据结构选对，内存自然省：Map 和 Set 在很多场景下比传统对象和数组更高效，而且更不容易产生意外的引用。能选它们就优先选。

10. 资源用完就放掉：图片、音频、视频这些大块头资源，用完了别舍不得扔。调用 URL.revokeObjectURL() 或者直接把资源引用置 null，让垃圾回收器可以安心干活。

说到底，避免内存泄漏没什么玄学，核心就是一条——**不需要的东西，别让它赖着不走**。把上面这几点当成日常编码的习惯，你的应用性能和稳定性自然会上去一大截。”