JavaScript内存泄漏解决

JavaScript内存泄漏解决实战指南

常见内存泄漏场景与解决方案

1. 全局变量泄漏

// 错误示例
function leakExample() {
  globalVar = 'memory leak'; // 没有使用var/let/const声明
}

// 正确做法
function correctExample() {
  let localVar = 'no leak';
  return localVar;
}

2. 闭包内存泄漏

// 错误示例
function createClosure() {
  const largeData = new Array(1000000).fill('data');
  return function() {
    return largeData.length; // 大数据被闭包引用无法释放
  };
}

// 正确做法
function createClosure() {
  const largeData = new Array(1000000).fill('data');
  return function() {
    return largeData.length;
  };
}
// 使用完后手动清理引用
let closure = createClosure();
closure = null; // 手动释放引用

3. DOM引用泄漏

// 错误示例
const elements = [];
for (let i = 0; i < 1000; i++) {
  const div = document.createElement('div');
  div.onclick = function() { /* 处理逻辑 */ };
  elements.push(div);
}

// 正确做法
const elements = [];
for (let i = 0; i < 1000; i++) {
  const div = document.createElement('div');
  div.onclick = function() { /* 处理逻辑 */ };
  elements.push(div);
}
// 使用完后清理
function cleanup() {
  elements.forEach(el => {
    el.onclick = null; // 清除事件监听
    el.remove(); // 移除DOM节点
  });
  elements.length = 0;
}

4. 定时器泄漏

// 错误示例
function startTimer() {
  setInterval(() => {
    console.log('timer running');
  }, 1000);
}

// 正确做法
let timerId;
function startTimer() {
  timerId = setInterval(() => {
    console.log('timer running');
  }, 1000);
}

function stopTimer() {
  if (timerId) {
    clearInterval(timerId);
    timerId = null;
  }
}

实际复现步骤

1. 在浏览器控制台执行泄漏代码
2. 打开Performance面板，录制内存使用情况
3. 观察内存持续增长
4. 应用修复方案后重新测试
5. 对比前后内存使用差异