JavaScript中的内存管理：堆、栈与垃圾回收机制

一、内存管理的基本概念

JavaScript引擎在运行时会将内存分为多个区域，其中最重要的两个是栈（Stack）和堆（Heap）：

1. 栈内存：

   • 存储基本类型（如number、string、boolean等）的值和函数的调用栈（如局部变量、参数、返回地址）。
   • 空间固定且较小，由系统自动分配和释放，效率高。
   • 示例：

     let a = 1; // 值`1`直接存储在栈中  
     function foo(b) {  
       let c = 2; // `b`和`c`存储在栈中  
     }  
     

2. 堆内存：

   • 存储引用类型（如对象、数组、函数等）的实际数据。
   • 空间较大但分配和释放更复杂，由垃圾回收器管理。
   • 示例：

     let obj = { name: "Alice" }; // 对象本身在堆中，变量`obj`存储的是堆地址  
     

3. 变量与内存的关系：

   • 基本类型的值直接保存在栈中，赋值时是值拷贝。
   • 引用类型的值保存在堆中，变量存储的是其堆地址，赋值时是地址拷贝（浅拷贝）。

二、垃圾回收机制（Garbage Collection）

JavaScript通过垃圾回收器自动释放不再使用的内存，主要算法包括：

1. 引用计数（早期算法，现已被淘汰）

• 原理：记录每个对象被引用的次数，当引用数为0时立即回收。
• 缺陷：无法解决循环引用问题（如两个对象相互引用），导致内存泄漏。
• 示例：

  let A = { ref: null };  
  let B = { ref: null };  
  A.ref = B; // A引用B  
  B.ref = A; // B引用A  
  // 即使A和B不再使用，引用数仍为1，无法回收  
  

2. 标记清除（现代主流算法）

• 原理：
  1. 标记阶段：从根对象（如全局变量、当前函数局部变量）出发，递归标记所有可达对象。
  2. 清除阶段：遍历堆，回收未被标记的对象。
• 优点：解决循环引用问题（不可达的对象会被回收）。
• 示例：

  function test() {  
    let x = { a: 1 };  
    let y = { b: x };  
    x.c = y; // 循环引用  
  }  
  test(); // 函数执行后，x和y已不可达，会被标记清除回收  
  

3. 分代收集与辅助算法

• 分代收集：将堆分为新生代（频繁回收短期对象）和老生代（较少回收长期存活对象），针对不同区域采用不同策略（如Scavenge算法复制新生代对象）。
• 增量标记：将标记过程分解为小步骤，避免长时间阻塞主线程。

三、常见内存泄漏场景与避免方法

1. 意外全局变量：

   function leak() {  
     globalVar = "未声明的变量会变成全局变量"; // 严格模式下会报错  
     this.leaked = "函数内this指向全局（非严格模式）";  
   }  
   

   解决：使用严格模式"use strict"，避免隐式全局变量。

2. 未清理的定时器或回调：

   let data = getHugeData();  
   setInterval(() => {  
     const node = document.getElementById("node");  
     if (node) node.innerHTML = data;  
   }, 1000);  
   // 即使node被移除，定时器仍持有data的引用  
   

   解决：用clearInterval清理定时器，或使用WeakRef避免强引用。

3. 闭包持有外部变量：

   function createClosure() {  
     let largeData = new Array(1000000);  
     return () => largeData; // 闭包一直引用largeData  
   }  
   

   解决：在不需要时手动解除引用（如largeData = null）。

4. DOM引用未释放：

   let elements = {  
     button: document.getElementById("button"),  
   };  
   // 即使从DOM移除button，elements仍持有其引用  
   

   解决：移除DOM后设置elements.button = null。

四、内存监控工具

1. Chrome DevTools：
   • Memory面板：通过Heap Snapshot对比内存变化，查看对象保留树。
   • Performance面板：记录内存分配时间线，定位泄漏点。
2. performance.memory API（仅限浏览器）：

   console.log(performance.memory);  
   // 输出：{  
   //   usedJSHeapSize: 当前占用内存,  
   //   totalJSHeapSize: 总内存,  
   //   jsHeapSizeLimit: 内存上限  
   // }  
   

五、总结

• 栈内存管理简单高效，堆内存依赖垃圾回收机制。
• 现代JS引擎主要使用标记清除算法，辅以分代收集和增量标记优化性能。
• 避免内存泄漏的关键：及时解除引用、清理定时器/事件监听、谨慎使用闭包。
• 通过开发者工具主动监控内存使用，确保应用稳定性。