内存泄漏：你的页面为什么越跑越卡？

内存泄漏的本质

内存泄漏发生在程序分配了内存但未能正确释放，导致可用内存逐渐减少。前端开发中，JavaScript的自动垃圾回收机制（GC）并不完美，某些情况下无法识别该回收的内存。当页面长时间运行后，未被释放的内存不断累积，轻则导致页面卡顿，重则直接崩溃。

典型的泄漏场景包括：未清理的定时器、遗忘的事件监听器、游离的DOM引用、闭包中的变量保留以及全局变量滥用。这些看似微小的疏忽，在单页应用（SPA）长期运行时会像沙漏中的沙子一样逐渐堆积。

定时器：隐藏的内存吞噬者

// 危险示例：未清理的interval
function startAnimation() {
  const element = document.getElementById('animated');
  let angle = 0;
  setInterval(() => {
    element.style.transform = `rotate(${angle++}deg)`;
  }, 16);
}

// 正确做法：保留引用以便清除
const animationIntervals = new Set();
function safeAnimation() {
  const element = document.getElementById('animated');
  let angle = 0;
  const id = setInterval(() => {
    element.style.transform = `rotate(${angle++}deg)`;
  }, 16);
  animationIntervals.add(id);
}

// 组件卸载时清理所有定时器
function cleanup() {
  animationIntervals.forEach(clearInterval);
}

定时器的问题在于它们持有回调函数的引用，而回调函数可能又持有DOM元素或其他大对象的引用。React等框架的组件卸载时，必须手动清除setTimeout和setInterval，否则这些定时器会持续运行并保持对组件作用域的引用。

DOM引用：被遗忘的幽灵节点

// 泄漏示例：全局缓存DOM元素
const cachedElements = [];
function processData(data) {
  const container = document.createElement('div');
  // ...处理数据并填充container
  document.body.appendChild(container);
  cachedElements.push(container); // 即使移除DOM，引用仍在
}

// 改进方案：WeakMap自动释放
const elementRegistry = new WeakMap();
function safeProcess(data) {
  const container = document.createElement('div');
  // ...处理数据
  document.body.appendChild(container);
  elementRegistry.set(container, { metadata: data.id });
  // 当container被移除DOM后，WeakMap中的条目会自动删除
}

手动维护的DOM引用列表是最常见的泄漏源。当从文档中移除节点但代码中仍保留引用时，这些"僵尸节点"及其关联内存不会被释放。使用WeakMap或WeakSet可以避免这个问题，因为它们允许垃圾回收器在键对象不再被引用时自动清除条目。

事件监听器：绑定的枷锁

// 问题代码：重复添加监听器
class SearchComponent {
  constructor() {
    this.input = document.getElementById('search');
    this.input.addEventListener('input', this.handleSearch);
  }
  
  handleSearch = (e) => {
    console.log(e.target.value);
  }
}

// 每次创建新实例都会添加新监听器
new SearchComponent();
new SearchComponent();

// 正确实现：先移除再添加
class SafeSearch {
  constructor() {
    this.input = document.getElementById('search');
    this.cleanup();
    this.input.addEventListener('input', this.handleSearch);
  }
  
  handleSearch = (e) => {
    console.log(e.target.value);
  }
  
  cleanup() {
    this.input.removeEventListener('input', this.handleSearch);
  }
}

事件监听器会阻止相关对象被回收，特别是当监听器绑定在全局对象（如window）或长生命周期元素上时。在React中，useEffect的清理函数必须移除所有事件监听：

useEffect(() => {
  const handleResize = () => console.log(window.innerWidth);
  window.addEventListener('resize', handleResize);
  return () => window.removeEventListener('resize', handleResize);
}, []);

闭包陷阱：意外的记忆保持

function createHeavyCalculator() {
  const largeData = new Array(1000000).fill({/* 大数据结构 */});
  
  return function calculate() {
    // 使用largeData进行计算
    return largeData.length * Math.random();
  };
}

const calculator = createHeavyCalculator();
// largeData本应被回收，但被闭包长期持有

闭包会保持对其外部作用域变量的引用。当闭包生命周期超过预期时（如存储在全局变量、事件监听器或缓存中），它引用的所有变量都会留在内存中。解决方案是适时解除引用：

function createLightCalculator() {
  const largeData = new Array(1000000).fill({});
  const publicAPI = {
    calculate() {
      return largeData.length * Math.random();
    },
    dispose() {
      // 显式清除引用
      largeData.length = 0;
    }
  };
  return publicAPI;
}

框架特定问题

React中的常见泄漏：

• 未清理的订阅：在useEffect中创建的WebSocket或RxJS订阅
• 状态提升不当：将大对象存储在全局状态（如Redux）而不及时清理
• 未取消的异步请求：组件卸载后仍处理Promise回调

// React泄漏示例
function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  
  useEffect(() => {
    fetchUser(userId).then(data => {
      setUser(data); // 如果请求返回前组件已卸载...
    });
  }, [userId]);

  // 修复：使用清理函数
  useEffect(() => {
    let isMounted = true;
    fetchUser(userId).then(data => {
      if (isMounted) setUser(data);
    });
    return () => { isMounted = false };
  }, [userId]);
}

Vue的潜在风险：

• v-if移除组件时未清理自定义事件
• 在beforeDestroy生命周期中遗漏清理工作
• 使用keep-alive缓存大量组件状态

// Vue泄漏示例
export default {
  data() {
    return {
      observer: null
    }
  },
  mounted() {
    this.observer = new IntersectionObserver(entries => {
      // 处理观察结果
    });
    this.observer.observe(this.$el);
  },
  // 必须手动清理
  beforeDestroy() {
    this.observer?.disconnect();
  }
}

检测与诊断工具

Chrome DevTools 内存分析：

1. Performance Monitor：实时观察JS堆大小、DOM节点数等
2. Memory面板的Heap Snapshot：比较前后快照找出增长对象
3. Allocation instrumentation on timeline：跟踪内存分配调用栈

实用检测技巧：

• 强制垃圾回收：在DevTools的Memory面板点击垃圾桶图标
• 使用performance.memoryAPI（仅Chrome）监控内存变化
• 查找分离的DOM树：在Heap Snapshot中过滤"Detached"

// 手动内存检测示例
setInterval(() => {
  const memory = performance.memory;
  console.log(`Used JS heap: ${memory.usedJSHeapSize / 1024 / 1024} MB`);
}, 5000);

防御性编程策略

1. 资源登记表模式：

class ResourceManager {
  constructor() {
    this.resources = new Set();
  }
  
  register(resource, destructor) {
    this.resources.add({ resource, destructor });
    return resource;
  }
  
  releaseAll() {
    this.resources.forEach(({ resource, destructor }) => {
      try {
        destructor(resource);
      } catch (e) {
        console.error('Cleanup error:', e);
      }
    });
    this.resources.clear();
  }
}

// 使用示例
const resources = new ResourceManager();
const timer = resources.register(
  setInterval(() => {}), 
  clearInterval
);
// 应用退出时
resources.releaseAll();

2. 对象池技术：

class DataProcessorPool {
  constructor(maxSize = 10) {
    this.pool = [];
    this.maxSize = maxSize;
  }
  
  acquire() {
    return this.pool.pop() || new DataProcessor();
  }
  
  release(instance) {
    instance.reset();
    if (this.pool.length < this.maxSize) {
      this.pool.push(instance);
    }
  }
}

// 使用示例
const pool = new DataProcessorPool();
const processor = pool.acquire();
// 使用后归还
pool.release(processor);

3. 自动化检测方案：

// 生产环境内存监控
if (process.env.NODE_ENV === 'production') {
  const warningThreshold = 500 * 1024 * 1024; // 500MB
  setInterval(() => {
    const memory = performance.memory;
    if (memory.usedJSHeapSize > warningThreshold) {
      navigator.sendBeacon('/memory-leak', {
        heapSize: memory.usedJSHeapSize,
        userAgent: navigator.userAgent,
        page: location.href
      });
    }
  }, 60000);
}

性能与内存的平衡艺术

某些优化内存的方案可能带来性能损耗，需要权衡：

• 弱引用vs强引用：WeakMap不阻止垃圾回收，但访问成本略高
• 立即清理vs延迟清理：频繁执行清理可能引起卡顿，可考虑空闲时处理
• 内存缓存策略：合理的缓存能提升性能，但需设置上限和过期机制

// 带过期机制的缓存
class ExpiringCache {
  constructor(maxAge = 60000) {
    this.cache = new Map();
    this.maxAge = maxAge;
  }
  
  set(key, value) {
    this.cache.set(key, {
      value,
      timestamp: Date.now()
    });
    this.cleanup();
  }
  
  get(key) {
    const entry = this.cache.get(key);
    if (!entry) return null;
    
    if (Date.now() - entry.timestamp > this.maxAge) {
      this.cache.delete(key);
      return null;
    }
    return entry.value;
  }
  
  cleanup() {
    if (this.cache.size > 50) { // 超过阈值才清理
      const now = Date.now();
      for (const [key, entry] of this.cache) {
        if (now - entry.timestamp > this.maxAge) {
          this.cache.delete(key);
        }
      }
    }
  }
}