当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript内存管理与垃圾回收解析

JavaScript内存管理与垃圾回收解析

2025-08-18 13:18:27 0浏览收藏

有志者，事竟成！如果你在学习文章，那么本文《JavaScript内存管理与垃圾回收机制详解》，就很适合你！文章讲解的知识点主要包括，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

JavaScript通过自动内存管理和垃圾回收机制避免内存泄漏，核心是标记-清除算法与分代回收策略，结合Chrome DevTools的堆快照和时间线分析可有效诊断内存问题。

JS如何实现内存管理？垃圾回收机制

JavaScript的内存管理和垃圾回收机制，说白了，就是浏览器引擎（比如V8）在幕后默默地帮我们处理内存的分配与释放，这样我们写代码时就不用像C/C++那样，时刻担心内存泄漏或者野指针的问题。核心思想是：当一个对象不再被程序中的任何部分引用时，它就成了“垃圾”，可以被回收，从而释放其占用的内存。

解决方案

理解JavaScript的内存管理，首先要明白它是一个高度自动化的过程。当我们创建变量、函数、对象时，内存就会被分配。比如声明一个let name = 'Alice';，字符串'Alice'就会占用一块内存。当我们操作这些数据时，就是在“使用”内存。而最关键的“释放”内存，则是由JavaScript引擎的垃圾回收器（Garbage Collector, GC）来完成的。开发者通常不需要手动去释放内存，这大大降低了编程的复杂性。

内存主要分为两块区域：栈（Stack）和堆（Heap）。

栈：主要用于存储原始类型（如数字、字符串、布尔值、null、undefined、Symbol、BigInt）的值，以及函数的执行上下文。栈内存的特点是自动分配和自动回收，当函数执行完毕，其在栈上的内存就会被自动清理，效率很高。
堆：主要用于存储引用类型（如对象、数组、函数）的值。这些值的大小不固定，而且可能在程序运行期间动态变化。堆内存的分配和回收就复杂多了，因为它们不像栈那样有严格的生命周期。这就是垃圾回收器大显身手的地方，它会定期扫描堆内存，找出那些不再被任何地方引用的对象，然后把它们占用的内存空间释放掉。

这种自动化的内存管理机制，极大地提高了开发效率和程序的健壮性，但也并非没有代价。有时，如果我们的代码不小心“拽住”了某个不再需要的对象，即使它实际上已经没用了，垃圾回收器也无法识别并回收它，这就会导致内存泄漏。

JavaScript垃圾回收机制是如何识别“垃圾”的？

要搞清楚哪些对象是“垃圾”，垃圾回收器需要一套判断标准。历史上和现代的JavaScript引擎主要依赖几种策略来完成这项工作。

早期的，或者说理论上最直观的一种方式是引用计数（Reference Counting）。它的逻辑很简单：每个对象都有一个引用计数器，当有变量引用它时，计数器加一；当引用它的变量不再引用它时（比如变量被重新赋值或者超出作用域），计数器减一。当一个对象的引用计数变为零时，就认为它不再被需要，可以回收。这个机制听起来很完美，但它有一个致命的缺陷：循环引用。比如对象A引用了对象B，同时对象B也引用了对象A，即使这两个对象在程序中已经完全无法访问了，它们的引用计数却永远不会变为零，导致内存无法释放。所以，现代浏览器引擎基本不再使用纯粹的引用计数。

现在主流的垃圾回收算法是标记-清除（Mark-and-Sweep）。这个算法分两个阶段：

标记阶段（Marking）：垃圾回收器会从一组“根”（Roots）对象开始遍历。这些根对象通常是全局对象（比如window或global）、当前执行栈上的变量等，它们是程序运行时始终可达的对象。垃圾回收器会从这些根出发，递归地遍历所有它们能直接或间接访问到的对象，并给这些“可达”的对象打上标记。
清除阶段（Sweeping）：遍历堆中的所有对象，如果发现某个对象没有被标记（也就是说，从根对象出发无法到达它），那么它就是不可达的，也就是“垃圾”，垃圾回收器就会将其占用的内存空间回收。

标记-清除算法解决了循环引用的问题，因为即使A和B相互引用，只要它们都无法从根对象访问到，它们最终都会被标记为不可达，然后被清除。不过，标记-清除有一个潜在问题：回收后的内存空间可能是不连续的，导致内存碎片。为了解决这个问题，V8引擎等还引入了标记-整理（Mark-and-Compact）算法，它在清除之后，还会把所有存活的对象往一端移动，从而整理出连续的内存空间。

为了提高效率，现代JS引擎还采用了分代回收（Generational Collection）策略。它基于一个经验事实：大多数对象生命周期很短，而少数对象生命周期很长。所以，它把堆内存分成两部分：

新生代（Young Generation）：存放新创建的对象。这里的大多数对象很快就会“死亡”，所以回收频率很高，通常采用Scavenge算法（一种复制算法），将存活的对象复制到另一个区域，然后清空当前区域，效率很高。
老生代（Old Generation）：存放那些经过多次新生代回收后仍然存活的对象。这里的对象生命周期较长，回收频率较低，主要使用标记-清除和标记-整理算法。

此外，为了避免垃圾回收时造成长时间的程序暂停（Stop-The-World），V8等引擎还引入了增量回收（Incremental GC）和并发回收（Concurrent GC）等技术，将垃圾回收工作分解成小块，或者让一部分工作与JavaScript代码并行执行，从而减少对用户体验的影响。

在JavaScript开发中，常见的内存泄漏场景有哪些？

尽管JS有自动垃圾回收，但我们编写代码时仍然可能因为一些不经意的习惯导致内存泄漏。理解这些场景，能帮助我们写出更健壮、性能更好的应用。

意外的全局变量：在非严格模式下，如果你不小心给一个未声明的变量赋值（例如 a = 'hello';），JavaScript会自动将其创建为全局对象（window或global）的一个属性。全局变量的生命周期与应用程序的生命周期一样长，除非被明确删除或页面关闭，否则它们永远不会被垃圾回收。这就像在屋子里扔了个东西，但忘了把它放进垃圾桶，它就一直呆在那里。
```
function createLeak() {
    // 意外创建全局变量
    leakVar = 'I am a global leak!';
}
createLeak(); // leakVar现在是全局的，不会被回收
```
在严格模式下，leakVar = 'I am a global leak!'; 会直接报错，这其实是个好习惯。

未清除的定时器（setInterval, setTimeout）：如果你设置了一个定时器，但忘记在不再需要时清除它，那么定时器回调函数以及它所引用的外部变量将永远不会被垃圾回收。这在单页面应用中尤其常见，当组件被销毁时，如果其内部的定时器没有被清理，就可能导致内存泄漏。

let count = 0;
const intervalId = setInterval(() => {
    count++;
    console.log('Count:', count);
    // 如果这里不满足某个条件去clearInterval，这个定时器会一直运行
    // 并且count变量也会一直存在，即使外部作用域已经消失
}, 1000);

// 假设在某个时刻，我们不再需要这个定时器
// 必须手动清除：
// clearInterval(intervalId);

未移除的事件监听器：当你给一个DOM元素添加了事件监听器，但在该DOM元素被移除或不再需要时，却没有移除对应的监听器，那么这个监听器函数以及它所引用的外部变量同样会留在内存中。这就像你给一个已经搬走的邻居留了个电话号码，即使他不在了，你的电话簿上还有他的信息。

const button = document.getElementById('myButton');
const data = { value: 'some data' };

function handleClick() {
    console.log(data.value); // 闭包引用了data
}

button.addEventListener('click', handleClick);

// 假设某个时候，button被从DOM中移除，但监听器没有移除
// button.remove(); // 只是移除了DOM元素，监听器还在
// 正确的做法是：
// button.removeEventListener('click', handleClick);

闭包引起的引用：闭包是JavaScript中一个强大但有时也容易导致内存泄漏的特性。当一个内部函数引用了外部函数的变量，即使外部函数执行完毕，这些变量也不会被垃圾回收，因为内部函数仍然可能被外部引用，从而保持对这些变量的引用。
```
function outer() {
    let largeArray = new Array(1000000).fill('some_string'); // 大数组
    return function inner() {
        // inner函数引用了largeArray，形成闭包
        console.log(largeArray.length);
    };
}

let myFunc = outer(); // outer执行完毕，但largeArray因为被inner引用而不会被回收
// myFunc = null; // 只有当myFunc不再被引用时，largeArray才有可能被回收
```
这里，largeArray会一直存在内存中，直到myFunc这个对inner函数的引用被清除。

DOM元素的引用：在JavaScript中，如果你缓存了对DOM元素的引用，即使该元素从DOM树中被移除，只要JS代码中还有对它的引用，它就不会被垃圾回收。

const elements = [];
const div = document.createElement('div');
div.id = 'myDiv';
document.body.appendChild(div);
elements.push(div); // 缓存了对div的引用

// 假设某个操作移除了这个div
// document.body.removeChild(div);

// 此时，div虽然不在DOM树中，但elements数组中仍有对它的引用，导致内存泄漏
// elements = []; // 清空数组才能释放引用

Map、Set与WeakMap、WeakSet的选择： Map和Set会对它们的键（或值）保持强引用。这意味着，如果你将一个对象作为Map的键（或Set的值），即使这个对象在其他地方已经不再被引用，只要它还在Map或Set中，它就不会被垃圾回收。 WeakMap和WeakSet则不同，它们对键（WeakMap）或值（WeakSet）是弱引用。如果一个对象只被WeakMap或WeakSet引用，而没有其他强引用，那么当该对象变得不可达时，它就会被垃圾回收，并且自动从WeakMap/WeakSet中移除。这对于缓存DOM元素或管理对象生命周期非常有用。
```
let el = document.getElementById('someElement');
const myMap = new Map();
myMap.set(el, 'data'); // el被myMap强引用

// el = null; // 此时el变量不再引用该DOM元素，但myMap中仍有引用，导致DOM元素无法被回收

// 如果使用WeakMap
const myWeakMap = new WeakMap();
myWeakMap.set(el, 'data'); // el被myWeakMap弱引用

// el = null; // 此时el变量不再引用该DOM元素，当该DOM元素没有其他强引用时，它会被垃圾回收，并自动从myWeakMap中移除。
```
理解并合理使用WeakMap和WeakSet是避免某些内存泄漏的关键。

如何利用浏览器工具分析和诊断JavaScript内存问题？

当你的JavaScript应用出现性能瓶颈，或者用户反馈页面卡顿、崩溃时，内存泄漏往往是一个重要的原因。幸运的是，现代浏览器提供了强大的开发者工具来帮助我们分析和诊断这些内存问题，特别是Chrome DevTools，它简直是内存分析的瑞士军刀。

主要会用到Chrome DevTools的Memory面板。这里有几种不同的分析工具：

Heap snapshot (堆快照)：这是最常用的工具，它能捕获当前时刻JavaScript堆内存的完整状态。你可以把它想象成给内存拍了一张照片。通过对比不同时间点的快照，就能发现哪些对象在持续增长，从而找出内存泄漏的元凶。
- 如何使用：
  1. 打开DevTools (F12)。
  2. 切换到“Memory”面板。
  3. 选择“Heap snapshot”选项。
  4. 点击“Take snapshot”按钮。
- 分析技巧：
  - 重复操作：执行可能导致内存泄漏的操作（比如打开/关闭一个弹窗、导航到不同页面），然后重复这个操作几次。
  - 拍快照：在操作前拍一个快照，操作后（比如弹窗关闭后）再拍一个快照。
  - 对比：在第二个快照的顶部，选择“Comparison”视图，然后选择与第一个快照进行对比。
  - 查找差异：按“Delta”列排序，关注那些“#New”列（新增对象数量）或“Size Delta”列（内存增量）显著增加的对象。
  - Retainers视图：选中一个可疑的对象，在底部的“Retainers”视图中，你可以看到是哪些对象引用了它，从而形成了一条“引用链”，帮助你追溯到泄漏的根源。这就像顺藤摸瓜，找到是哪个变量或闭包“拽住”了不该存在的对象。
Allocation instrumentation on timeline (分配时间线)：这个工具可以记录一段时间内JavaScript对象的内存分配情况和垃圾回收活动。它能帮你可视化地看到内存使用量的波动，以及哪些函数在什么时间点分配了大量的内存。
- 如何使用：
  1. 在“Memory”面板中选择“Allocation instrumentation on timeline”。
  2. 点击录制按钮（圆点）。
  3. 执行你的应用程序操作。
  4. 点击停止录制。
- 分析技巧：
  - 观察趋势：查看图表，如果内存曲线持续上升且没有回落，很可能存在内存泄漏。
  - 查看分配热点：图表下方会显示在录制期间分配内存最多的函数调用栈，帮助你定位到具体的代码行。
Allocation sampling (分配采样)：这个工具以更低的开销记录内存分配，适合长时间运行的分析，它能告诉你哪些函数在分配内存。
- 如何使用：
  1. 在“Memory”面板中选择“Allocation sampling”。
  2. 点击“Start”按钮。
  3. 执行你的应用程序操作。
  4. 点击“Stop”按钮。
- 分析技巧：
  - 结果会以树状结构展示，显示每个函数分配的内存量，帮助你找出内存分配的“大户”。

一些实用的调试小技巧：

隔离问题：如果怀疑某个组件或功能有内存泄漏，尝试只运行该部分代码，看内存是否增长。
重复操作：内存泄漏通常在重复执行某个操作后才会明显体现出来。
使用console.memory：虽然不是标准API，但在Chrome中，console.memory可以提供当前JS堆内存的概览信息（totalJSHeapSize和usedJSHeapSize），可以用于简单的监控。
强制垃圾回收：在DevTools的Performance或Memory面板中，有一个“Collect garbage”按钮（垃圾桶图标），点击它可以手动触发一次垃圾回收。这有助于你判断内存是否真的被“拽住”了，如果手动GC后内存仍然不下降，那基本就是泄漏了。

通过这些工具和方法，我们能够更深入地理解应用的内存行为，精准定位并解决内存泄漏问题，从而提升应用的稳定性和性能。

到这里，我们也就讲完了《JavaScript内存管理与垃圾回收解析》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！