如何通过JavaScript的垃圾回收机制管理内存，以及常见的内存泄漏场景和防范措施有哪些？-js教程-PHP中文网

如何通过JavaScript的垃圾回收机制管理内存，以及常见的内存泄漏场景和防范措施有哪些？

狼影

发布： 2025-09-19 19:37:01

原创

245人浏览过

JavaScript通过标记清除和引用计数管理内存，标记清除从根对象遍历并标记可达对象，未标记的将被回收；引用计数因循环引用问题易导致内存泄漏，现代引擎多采用优化后的标记清除及分代回收。常见内存泄漏包括全局变量、闭包持有大对象、DOM引用未释放、定时器和事件监听器未清除等。可通过浏览器开发者工具的Memory和Performance面板分析堆快照与内存趋势，结合代码审查定位问题。避免泄漏的最佳实践有：使用let/const声明变量、及时清除定时器和事件监听器、打破循环引用、使用WeakRef避免强引用、利用对象池减少GC压力，并定期使用内存分析工具检查。WeakRef提供弱引用，不阻止对象被回收，适用于缓存和解循环引用；FinalizationRegistry在对象被回收时触发回调，用于资源清理，但回调时机不确定，不可依赖其执行关键逻辑。合理使用这些机制可提升应用性能与稳定性。

如何通过javascript的垃圾回收机制管理内存，以及常见的内存泄漏场景和防范措施有哪些？

JavaScript的垃圾回收机制主要通过标记清除和引用计数来自动管理内存，但理解其工作原理以及潜在的内存泄漏场景对于编写高效、稳定的应用至关重要。

解决方案

JavaScript的垃圾回收器（GC）负责自动回收不再使用的内存，从而避免手动管理内存的复杂性。

标记清除（Mark and Sweep）： 这是最常见的GC算法。
- GC会从根对象（例如全局对象）开始，遍历所有可达的对象，并将其标记为“活动”状态。
- 未被标记的对象被认为是不可达的，GC会回收这些对象所占用的内存。
引用计数（Reference Counting）： 较早期的策略，现代浏览器通常不单独使用。
- 每个对象都有一个引用计数器，记录有多少引用指向该对象。
- 当引用计数变为0时，表示该对象不再被使用，GC会立即回收其内存。
- 循环引用是引用计数的主要问题，例如两个对象互相引用，即使它们不再被程序使用，引用计数也永远不会变为0，导致内存泄漏。

现代JavaScript引擎主要依赖标记清除算法，并进行了优化，例如分代回收（Generational Garbage Collection），根据对象的生命周期长短，将内存划分为不同的区域，并采用不同的回收策略，提高GC效率。

立即学习“Java免费学习笔记（深入）”；

副标题1 JavaScript中常见的内存泄漏有哪些？如何定位和诊断内存泄漏问题？

以下是一些常见的内存泄漏场景：

全局变量： 在函数内部意外创建全局变量（忘记使用
```
var
```
登录后复制
、
```
let
```
登录后复制
或
```
const
```
登录后复制
声明）会导致变量一直存在于全局作用域中，无法被回收。
闭包： 闭包可以访问外部函数的作用域，如果闭包持有对大型对象的引用，即使外部函数执行完毕，这些对象也无法被回收。
DOM 元素引用： JavaScript对象持有对DOM元素的引用，即使DOM元素从DOM树中移除，只要JavaScript对象还存在，DOM元素就无法被回收。尤其是在使用事件监听器时，如果事件监听器绑定到DOM元素，并且没有在DOM元素移除时移除监听器，也会导致内存泄漏。
定时器和回调函数： 使用
```
setInterval
```
登录后复制
或
```
setTimeout
```
登录后复制
创建的定时器，如果没有被正确清除（使用
```
clearInterval
```
登录后复制
或
```
clearTimeout
```
登录后复制
），会导致定时器回调函数及其引用的对象一直存在，无法被回收。
未释放的事件监听器： 在组件卸载或元素移除时，忘记移除通过
```
addEventListener
```
登录后复制
添加的事件监听器，会导致内存泄漏。

定位和诊断内存泄漏问题：

浏览器开发者工具： 现代浏览器都提供了强大的开发者工具，可以用来分析内存使用情况。
- Memory 面板： 可以创建堆快照（Heap Snapshot），比较不同时间点的堆快照，找出新增的对象，从而定位内存泄漏。
- Performance 面板： 可以记录一段时间内的内存使用情况，观察内存是否持续增长。
使用内存分析工具： 一些第三方工具，例如 Chrome DevTools 的 Memory 工具，可以帮助你分析内存泄漏的根源。
代码审查： 仔细检查代码，特别是涉及闭包、定时器、事件监听器和DOM操作的部分，查找潜在的内存泄漏点。

副标题2 如何避免JavaScript中的内存泄漏？有哪些最佳实践？

避免内存泄漏的一些最佳实践：

AI-Text-Classifier

OpenAI官方出品，可以区分人工智能书写的文本和人类书写的文本

查看详情

使用
let
登录后复制
和
const
登录后复制
声明变量：避免意外创建全局变量。
谨慎使用闭包： 确保闭包只持有必要的引用，并在不再需要时释放引用。
移除事件监听器： 在组件卸载或元素移除时，使用
```
removeEventListener
```
登录后复制
移除事件监听器。
清除定时器： 使用
```
clearInterval
```
登录后复制
和
```
clearTimeout
```
登录后复制
清除定时器。
避免循环引用： 打破循环引用，例如将其中一个引用设置为
```
null
```
登录后复制
。
使用弱引用（WeakRef）： ECMAScript 2021 引入了
```
WeakRef
```
登录后复制
，可以创建对对象的弱引用。弱引用不会阻止垃圾回收器回收对象。当对象被回收时，弱引用会自动失效。
使用内存分析工具进行定期检查： 定期使用浏览器开发者工具或其他内存分析工具检查内存使用情况，及时发现和修复内存泄漏问题。
对象池： 对于频繁创建和销毁的对象，可以使用对象池来重用对象，减少GC的压力。
避免过度使用第三方库： 某些第三方库可能存在内存泄漏问题，选择可靠的、经过良好测试的库。

副标题3 WeakRef和FinalizationRegistry在垃圾回收中的作用是什么？如何使用它们？

WeakRef

登录后复制

和

FinalizationRegistry

登录后复制

是 JavaScript 中用于更精细地控制垃圾回收的两个特性。

WeakRef：

WeakRef

登录后复制

允许你创建一个对对象的弱引用。与普通引用不同，弱引用不会阻止垃圾回收器回收对象。如果一个对象只被弱引用引用，那么垃圾回收器可以自由地回收该对象。

let target = { name: 'Example' };
const weakRef = new WeakRef(target);

// 稍后，当你想访问对象时
const dereferenced = weakRef.deref(); // 返回 target 对象，如果 target 已经被回收，则返回 undefined

if (dereferenced) {
  console.log(dereferenced.name); // 输出 "Example"
} else {
  console.log('对象已经被回收');
}

target = null; // 解除强引用，对象可能被回收

登录后复制

FinalizationRegistry：

FinalizationRegistry

登录后复制

允许你在对象被垃圾回收时收到通知。你可以注册一个回调函数，当对象被回收时，该回调函数会被调用。

const registry = new FinalizationRegistry(heldValue => {
  console.log(`对象 ${heldValue} 已经被回收`);
  // 在这里执行清理操作，例如释放资源
});

let target = { name: 'Example' };
registry.register(target, 'targetObject');

target = null; // 解除强引用，对象可能被回收

登录后复制

使用场景：

WeakRef：
- 缓存： 可以使用
```
WeakRef
```
  登录后复制
  来缓存对象，如果内存紧张，垃圾回收器可以回收缓存中的对象。
- 避免循环引用： 可以使用
```
WeakRef
```
  登录后复制
  来打破循环引用，避免内存泄漏。
FinalizationRegistry：
- 资源清理： 可以在对象被回收时执行清理操作，例如关闭文件、释放网络连接等。
- 监控对象生命周期： 可以使用
```
FinalizationRegistry
```
  登录后复制
  来监控对象的生命周期，了解对象何时被回收。