内存管理与垃圾回收

内存管理基础概念

内存管理是编程语言中至关重要的部分，它决定了程序如何分配、使用和释放内存。在JavaScript中，内存管理主要通过自动分配和垃圾回收机制来实现。当创建变量、对象或函数时，JavaScript引擎会自动分配内存，并在不再需要时自动释放。

// 基本类型的内存分配
let num = 42;  // 分配内存存储数字
let str = "Hello";  // 分配内存存储字符串

// 对象类型的内存分配
let obj = {
  name: "Alice",
  age: 25
};  // 分配内存存储对象及其属性

JavaScript的内存模型

JavaScript的内存空间主要分为栈内存和堆内存。栈内存用于存储基本类型值和引用类型的地址指针，而堆内存则用于存储引用类型的实际数据。

// 栈内存示例
let a = 10;  // 基本类型，存储在栈中
let b = a;   // 创建副本，b独立于a

// 堆内存示例
let obj1 = {value: 20};  // 对象存储在堆中，栈中存储引用
let obj2 = obj1;         // 复制引用，指向同一个对象
obj2.value = 30;         // 修改会影响obj1
console.log(obj1.value); // 输出30

垃圾回收机制原理

JavaScript使用自动垃圾回收机制来管理内存，主要基于引用计数和标记清除两种算法。现代浏览器主要采用标记清除算法，因为它能更好地处理循环引用的情况。

// 引用计数示例
function referenceCounting() {
  let x = {a: 1};  // 引用计数: 1
  let y = x;        // 引用计数: 2
  y = null;         // 引用计数: 1
  x = null;         // 引用计数: 0 (可回收)
}

// 循环引用问题
function circularReference() {
  let objA = {};
  let objB = {};
  objA.ref = objB;  // objA引用objB
  objB.ref = objA;  // objB引用objA (循环引用)
}
// 即使函数执行完毕，引用计数不为0，但标记清除算法可以处理

V8引擎的内存管理

V8引擎作为Chrome和Node.js的JavaScript引擎，具有独特的内存管理策略。它将堆内存分为新生代和老生代，采用不同的垃圾回收策略。

// 演示对象晋升过程
function createLargeObjects() {
  let temp = [];
  for (let i = 0; i < 100000; i++) {
    temp.push(new Array(1000).join('*'));  // 创建大对象
  }
  return temp[0];  // 保留一个引用，其余可被回收
}

createLargeObjects();  // 多次调用可能导致对象晋升到老生代

内存泄漏常见场景

虽然JavaScript有自动垃圾回收，但不当的代码仍可能导致内存泄漏。常见的内存泄漏场景包括意外的全局变量、未清理的定时器和回调、DOM引用等。

// 意外的全局变量
function leakMemory() {
  leakedVar = '这是一个全局变量';  // 忘记使用var/let/const
}

// 未清理的定时器
let intervalId = setInterval(() => {
  console.log('定时器运行中...');
}, 1000);
// 忘记clearInterval(intervalId)会导致内存泄漏

// DOM引用
let elements = {
  button: document.getElementById('myButton'),
  image: document.getElementById('myImage')
};

// 即使从DOM移除，JS引用仍然存在
document.body.removeChild(document.getElementById('myButton'));
// elements.button仍然引用DOM元素，无法被回收

性能优化实践

合理的内存管理可以显著提升应用性能。开发者可以通过对象池、避免内存抖动、及时解除引用等方法来优化内存使用。

// 对象池示例
class ObjectPool {
  constructor(createFn) {
    this.createFn = createFn;
    this.pool = [];
  }
  
  get() {
    return this.pool.length ? this.pool.pop() : this.createFn();
  }
  
  release(obj) {
    this.pool.push(obj);
  }
}

// 使用对象池
const pool = new ObjectPool(() => ({x: 0, y: 0}));
let obj = pool.get();  // 从池中获取或创建新对象
// 使用对象...
pool.release(obj);     // 使用完毕后放回池中

// 避免内存抖动
function processLargeArray() {
  const chunkSize = 1000;
  let index = 0;
  
  function processChunk() {
    const chunk = largeArray.slice(index, index + chunkSize);
    // 处理chunk...
    index += chunkSize;
    
    if (index < largeArray.length) {
      setTimeout(processChunk, 0);  // 分块处理，避免阻塞
    }
  }
  
  processChunk();
}

现代API与内存管理

新的JavaScript API如WeakMap和WeakSet提供了更好的内存管理方式，它们持有对对象的弱引用，不会阻止垃圾回收。

// WeakMap示例
let weakMap = new WeakMap();
let obj = {id: 1};
weakMap.set(obj, 'some data');

console.log(weakMap.get(obj));  // 输出'some data'
obj = null;  // 清除引用
// weakMap中的条目会被自动移除，因为键对象已被回收

// WeakRef和FinalizationRegistry
const registry = new FinalizationRegistry((heldValue) => {
  console.log(`${heldValue} 被回收了`);
});

let ref = new WeakRef({data: 'important'});
registry.register(ref.deref(), "重要对象");

// 当对象被回收时，回调函数会执行

调试与监控工具

浏览器提供了多种工具来分析和调试内存问题，如Chrome DevTools的Memory面板和Performance Monitor。

// 手动触发垃圾回收(仅限开发调试)
if (typeof gc === 'function') {
  gc();  // 需要在Chrome启动时添加--js-flags="--expose-gc"参数
}

// 内存使用情况监测
function monitorMemory() {
  const used = process.memoryUsage();  // Node.js环境
  console.log(`内存使用: 
    RSS: ${Math.round(used.rss / 1024 / 1024)}MB
    HeapTotal: ${Math.round(used.heapTotal / 1024 / 1024)}MB
    HeapUsed: ${Math.round(used.heapUsed / 1024 / 1024)}MB`);
}

setInterval(monitorMemory, 5000);  // 每5秒记录一次内存使用

实际案例分析

通过分析真实场景中的内存问题，可以更好地理解内存管理的实际应用。

// 案例1: 图片加载的内存管理
const imageCache = new Map();

function loadImage(url) {
  if (imageCache.has(url)) {
    return imageCache.get(url);
  }
  
  const img = new Image();
  img.src = url;
  imageCache.set(url, img);
  
  // 添加清理机制
  img.onload = () => {
    if (imageCache.size > 20) {  // 限制缓存大小
      const oldestKey = imageCache.keys().next().value;
      imageCache.delete(oldestKey);
    }
  };
  
  return img;
}

// 案例2: 单页应用的路由内存管理
window.addEventListener('popstate', () => {
  // 路由变化时清理前一个页面的资源
  cleanupPreviousPage();
});

function cleanupPreviousPage() {
  // 移除事件监听器
  document.removeAllListeners?.();
  
  // 清理大对象
  largeDataCache = null;
  
  // 取消未完成的请求
  activeRequests.forEach(req => req.abort());
  activeRequests = [];
}