内存泄漏问题

内存泄漏问题的本质

内存泄漏指的是程序中已分配的内存未能被正确释放，导致可用内存逐渐减少。在JavaScript中，由于自动垃圾回收机制的存在，开发者容易忽视内存管理，但不当的代码仍会导致内存无法被回收。常见场景包括意外的全局变量、未清理的定时器、DOM引用残留以及闭包滥用等。

全局变量引起的内存泄漏

未声明的变量会自动成为全局对象的属性，这在严格模式下会报错，但在非严格模式下会悄悄创建全局变量。这类变量会一直存在于内存中，直到页面关闭。

function leak() {
  leakedVar = '这是一个全局变量'; // 未使用var/let/const声明
}

更隐蔽的情况是通过this意外创建全局变量：

function Constructor() {
  this.property = '本该是实例属性';
}
const obj = Constructor(); // 忘记使用new操作符，this指向window

定时器与回调函数泄漏

未清除的定时器和事件监听器会阻止相关对象被回收，即使DOM元素已从页面移除。常见于SPA应用中未正确卸载组件时。

// 定时器泄漏示例
const intervalId = setInterval(() => {
  console.log('持续运行的定时器');
}, 1000);

// 组件卸载时未清除
// clearInterval(intervalId);

// 事件监听器泄漏
const button = document.getElementById('btn');
button.addEventListener('click', handleClick);

// 元素移除前未取消监听
// button.removeEventListener('click', handleClick);

DOM引用残留

当JavaScript保留对DOM元素的引用时，即使元素从DOM树中移除，内存也不会释放。这种情况常见于缓存DOM查询结果的场景。

const elementsCache = {
  header: document.getElementById('header'),
  footer: document.getElementById('footer')
};

// 从DOM移除元素
document.body.removeChild(document.getElementById('header'));

// 内存未释放，因为elementsCache仍持有引用
console.log(elementsCache.header); // 仍然可以访问

闭包导致的内存泄漏

闭包会维持对其外部函数变量的引用，不当使用会导致意外保留大量数据。典型例子是在循环中创建闭包。

function createClosures() {
  const hugeArray = new Array(1000000).fill('*');
  return function() {
    console.log(hugeArray.length); // 闭包维持对hugeArray的引用
  };
}

const closure = createClosures();
// 即使不再需要hugeArray，它仍存在于内存中

弱引用的解决方案

ES6引入的WeakMap和WeakSet提供弱引用机制，不会阻止垃圾回收。适合用于存储与DOM元素关联的元数据。

const weakMap = new WeakMap();
let element = document.getElementById('target');

weakMap.set(element, { clicks: 0 });
element.addEventListener('click', () => {
  const data = weakMap.get(element);
  data.clicks++;
});

// 当element被移除后，关联数据会自动回收
element = null;

性能分析工具的使用

Chrome DevTools的Memory面板提供堆快照功能，可以比较不同时间点的内存分配情况。通过Allocation instrumentation on timeline可以追踪内存分配的时间线。

// 在代码中插入标记便于识别
console.timeStamp('Memory test start');

// 执行可能泄漏的操作
createMemoryLeak();

console.timeStamp('Memory test end');

框架特定的内存管理

现代前端框架如React/Vue有各自的内存管理机制。React中常见问题是未在useEffect中清理副作用：

useEffect(() => {
  const handler = () => console.log('resized');
  window.addEventListener('resize', handler);
  
  // 缺少清理函数会导致监听器累积
  return () => window.removeEventListener('resize', handler);
}, []);

缓存策略的优化

过度缓存是内存泄漏的高危区，需要实现合理的缓存淘汰策略。LRU(最近最少使用)算法是常见解决方案。

class LRUCache {
  constructor(maxSize) {
    this.maxSize = maxSize;
    this.cache = new Map();
  }

  get(key) {
    const value = this.cache.get(key);
    if (value) {
      this.cache.delete(key);
      this.cache.set(key, value);
    }
    return value;
  }

  set(key, value) {
    if (this.cache.size >= this.maxSize) {
      const oldestKey = this.cache.keys().next().value;
      this.cache.delete(oldestKey);
    }
    this.cache.set(key, value);
  }
}

Web Worker中的内存泄漏

Web Worker虽然运行在独立线程，但仍有内存泄漏风险。特别是MessagePort和SharedArrayBuffer等特殊对象需要显式清理。

// worker.js
let largeData = null;

self.onmessage = function(e) {
  if (e.data.type === 'load') {
    largeData = new ArrayBuffer(1024 * 1024 * 100); // 100MB
  }
  if (e.data.type === 'cleanup') {
    largeData = null; // 必须手动释放
  }
};

内存泄漏的防御性编程

采用工厂模式封装资源创建/销毁逻辑，确保资源释放。TypeScript的装饰器可以自动添加清理逻辑。

function withCleanup(target: any, key: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;
  
  descriptor.value = function(...args: any[]) {
    const cleanupHandlers: (() => void)[] = [];
    const addCleanup = (handler: () => void) => {
      cleanupHandlers.push(handler);
    };

    try {
      return originalMethod.apply(this, [...args, addCleanup]);
    } finally {
      cleanupHandlers.reverse().forEach(handler => handler());
    }
  };
}

class Component {
  @withCleanup
  setup(addCleanup: (handler: () => void) => void) {
    const timer = setInterval(() => {}, 1000);
    addCleanup(() => clearInterval(timer));
  }
}