从内存泄漏到性能优化：JavaScript 内存管理全攻略_如何管理 three.js 的内存泄露-优快云博客

本文链接：https://blog.youkuaiyun.com/wujianrenn/article/details/146116841

“内存泄漏通常发生在你不小心丢失了对对象的引用，而这些对象的内存却没有被垃圾回收机制回收。” —— 这句话完美概括了内存泄漏的本质。内存泄漏是开发中常见且容易被忽视的问题，特别是在单页面应用（SPA）中，可能导致页面性能下降，甚至崩溃。本文将带你深入了解什么是内存泄漏，什么时候会发生内存泄漏，如何避免和弥补它，并从原理上讲解内存泄漏的产生原因。

什么是内存泄漏？

内存泄漏是指在程序运行过程中，已不再使用的内存没有被及时释放，导致内存占用持续增加，最终可能引起程序或系统的性能问题

在 JavaScript 中，垃圾回收机制会自动管理内存，但如果代码存在某些逻辑问题，仍然可能发生内存泄漏，导致不再需要的内存得不到释放。

为什么会发生内存泄漏？

JavaScript 引擎采用了垃圾回收机制（GC，Garbage Collection），它的主要工作是定期扫描内存中不再使用的对象，并将其回收以释放内存。

垃圾回收是基于引用计数或者标记-清除算法的，确保不会有无用对象占用内存

然而，内存泄漏通常是因为程序中某些对象仍然被引用，导致垃圾回收机制无法识别它们是“死对象”

这种情况通常发生在以下几种场景中：

全局变量：
当我们不小心将变量添加到全局作用域中时，它们会一直存在，直到程序结束。
这些变量会一直占用内存，造成内存泄漏。
闭包中的引用：
在 JavaScript 中，闭包会保留外部函数作用域中的变量。
当闭包没有正确释放这些变量时，导致它们一直占用内存
DOM节点的引用：
当页面的 DOM 元素被删除时，如果存在其他 JavaScript 代码仍然持有这些 DOM 元素的引用，垃圾回收机制将无法正确清除这些元素，造成内存泄漏
定时器：
当定时器（setTimeout、setInterval）没有被清除时，它们会持续保持对相关对象的引用，导致对象无法被垃圾回收
事件监听器：
如果事件监听器未被移除，它们会保持对相关对象的引用，导致内存泄漏
例如，当你为 DOM 元素添加事件监听器，而在不再需要这些元素时忘记移除事件监听器。

如何避免内存泄漏？

为了避免内存泄漏，我们可以遵循以下几个技巧和最佳实践：

1. 避免使用全局变量

尽量避免将变量添加到全局作用域中

如果非要使用全局变量，可以将它们封装到命名空间中，或者使用 let 或 const 来声明块级作用域变量，避免泄漏到全局作用域

2. 及时清除定时器和事件监听器

在不再需要定时器或事件监听器时，记得手动清除它们。使用 clearTimeout() 或 clearInterval() 来清除定时器，使用 removeEventListener() 来移除事件监听器

// 清除定时器
let timer = setInterval(() => {
  console.log("定时任务");
}, 1000);

// 停止定时器
clearInterval(timer);

3. 释放 DOM 节点的引用

如果你使用 JavaScript 操作 DOM，确保在 DOM 元素不再需要时，手动将其引用设为 null，以便垃圾回收能够释放它们占用的内存

let element = document.getElementById('someElement');
// 操作 DOM
element = null;  // 解除引用，允许 GC 回收

4. 小心闭包

闭包是 JavaScript 强大的特性，但如果使用不当，容易导致内存泄漏

在闭包中保持对外部变量的引用时，确保这些变量没有不必要的持久引用。如果闭包不再需要访问外部变量，确保解除引用

function outerFunction() {
  let counter = 0;
  return function innerFunction() {
    return counter++;
  };
}
const closure = outerFunction();  // 注意：outerFunction 执行后不再访问 counter

5. 使用 WeakMap 和 WeakSet 处理引用

WeakMap 和 WeakSet 是 JavaScript 提供的弱引用数据结构，能够解决在某些情况下引用对象时造成的内存泄漏问题

通过它们，键或值会被弱引用，垃圾回收机制可以自动回收未被引用的对象

let weakMap = new WeakMap();
let obj = {};
weakMap.set(obj, 'Some Value');

// 当 obj 被垃圾回收时，weakMap 中的引用也会被自动删除

如何检测内存泄漏？

尽管内存泄漏很难完全避免，但我们可以使用以下工具和方法来检测和诊断内存泄漏：

Chrome DevTools的内存面板(F12控制台)：

使用 Chrome 的开发者工具中的 Memory 面板，可以查看和分析内存快照，识别可能的内存泄漏源

特别是在“Heap Snapshot”选项卡下，能够查看对象和引用的详细信息，帮助找出没有被正确回收的对象

性能分析工具：

使用像 Lighthouse（灯塔）、WebPageTest 等性能分析工具，观察页面的内存使用情况，并监控是否有持续的内存增长

代码审查：

定期进行代码审查，检查是否有可能导致内存泄漏的地方，如全局变量、定时器、事件监听器等

总结

内存泄漏是一个隐藏在代码中的潜在问题，通常不会立即引发崩溃，但随着时间的推移，它会严重影响程序的性能和稳定性

通过理解内存泄漏的原因、避免常见的错误，并使用合适的工具检测问题，你可以更有效地管理 JS 程序的内存使用

不断优化代码，减少内存泄漏，是开发高效、稳定应用的重要步骤