前端内存管理：为什么你的页面越用越卡？——从垃圾回收到内存泄漏排查

function createUser() {  const user = { name: "张三", age: 25 };  console.log(user.name);}
createUser();// 函数执行完，user 还能被访问到吗？// 不能。局部变量出了作用域，没人引用它了。// GC 下次扫过来，会把 { name: "张三", age: 25 } 这个对象清理掉。

// 示意：Scavenge 的工作流程（非真实代码，仅帮助理解）
// 初始状态：From 空间有 4 个对象，To 空间是空的// From: [objA(存活), objB(垃圾), objC(存活), objD(垃圾)]// To:   []
// GC 触发：// 1. 遍历 From 空间，标记存活对象// 2. 把 objA 和 objC 复制到 To 空间// 3. 清空整个 From 空间（objB 和 objD 直接丢掉）// 4. 交换角色：To 变成新的 From，From 变成空的 To
// 结果：// From: [objA, objC]  ← 存活对象在这里，继续被程序使用// To:   []              ← 空的，等下一轮 GC 当接收筐

// 示意：标记阶段的工作流程
// 假设内存里有这些对象：// window.user → { name: "张三", profile: profileObj }// profileObj → { avatar: "url", settings: settingsObj }// settingsObj → { theme: "dark" }// window.cache → { data: hugeArray }  // 被全局变量引用，可达// orphanObj → { a: 1 }               // 没有任何人引用，不可达
// 标记阶段：// 1. 从 window（根）出发，找到 window.user → 标记 user// 2. 从 user 找到 profileObj → 标记 profileObj// 3. 从 profileObj 找到 settingsObj → 标记 settingsObj// 4. 从 window 找到 window.cache → 标记 cache// 5. orphanObj 没被任何人引用，不标记
// 标记完成后：// 存活对象：user, profileObj, settingsObj, cache// 垃圾对象：orphanObj

// 示意：清除阶段// 遍历内存：// - user（已标记）→ 保留// - profileObj（已标记）→ 保留// - settingsObj（已标记）→ 保留// - cache（已标记）→ 保留// - orphanObj（未标记）→ 回收内存

// 示意：压缩阶段
// 清除后的内存布局（假设）：// [user][空][profileObj][空][空][settingsObj][空][cache][空][空][空]//       ↑ 碎片           ↑ 碎片               ↑ 碎片
// 压缩后：// [user][profileObj][settingsObj][cache][空][空][空][空][空][空][空]// 存活对象全部挤到左边，右边是一整块连续的空闲内存

function processData() {  // 糟糕！忘了写 let / const / var  data = new Array(10_000_000).fill("x"); // 1000 万项，约 80MB  console.log("处理完成");}
processData();// 函数执行完，data 会被释放吗？// 不会。因为 data 没有声明，它变成了 window.data（全局变量）// 全局变量是 GC 的"根"，永远不会被释放。

function processData() {  const data = new Array(10_000_000).fill("x"); // 显式声明  console.log("处理完成");  // 函数执行完，data 是局部变量，没人引用，GC 会正常清理}
processData();

function createReporter() {  // 一个巨大的数据对象  const hugeData = new Array(10_000_000).fill("report-data"); // 约 80MB
  return function reporter() {    // 闭包直接访问了 hugeData    return hugeData.length; // 返回数据条数  };}
const report = createReporter();// hugeData 会被释放吗？// 不会。reporter 闭包实际访问了 hugeData，所以 hugeData 会被保留

function createReporter() {  const hugeData = new Array(10_000_000).fill("report-data"); // 约 80MB
  // 把 hugeData 挂到一个对象上  const config = {    data: hugeData,  // config 引用了 hugeData    title: "报告已生成",  };
  return function reporter() {    // 闭包只访问了 config.title    return config.title;  };}
const report = createReporter();// hugeData 会被释放吗？// 不会。虽然 reporter 只读了 config.title，但闭包引用了整个 config 对象// config 对象里又挂着 data: hugeData，所以 hugeData 间接被保留了

function createReporter() {  const hugeData = new Array(10_000_000).fill("report-data");
  // 先处理完数据，把结果提取出来  const result = processHugeData(hugeData); // 假设处理后只有 1KB
  // 返回的闭包里只引用 result，不引用 hugeData 和任何中间对象  return function reporter() {    return result; // 只用到处理后的结果  };}
const report = createReporter();// 函数执行完，hugeData 只在 createReporter 内部被使用// 闭包没有引用它，GC 可以正常释放// 只有 1KB 的 result 被闭包保留

class Dialog {  constructor() {    this.element = document.createElement("div");    this.element.innerHTML = "<button>确认</button>";
    // 给按钮绑定点击事件    this.button = this.element.querySelector("button");    this.button.addEventListener("click", this.handleClick.bind(this));  }
  handleClick() {    console.log("确认了");  }
  destroy() {    // 只是把 DOM 从页面移除    this.element.remove();    // 但没有移除事件监听器！  }}
// 使用const dialog = new Dialog();document.body.appendChild(dialog.element);
// 用户关闭弹窗dialog.destroy();// dialog.element 从页面移除了，但事件监听器还在！// this.button 引用着 DOM 节点，DOM 节点通过 bind(this) 引用着 dialog 实例// 整个 dialog 实例，包括里面的所有数据，都无法释放

class Dialog {  constructor() {    this.element = document.createElement("div");    this.element.innerHTML = "<button>确认</button>";    this.button = this.element.querySelector("button");
    // 绑定事件，但先存一份引用，方便后续移除    this.boundClick = this.handleClick.bind(this);    this.button.addEventListener("click", this.boundClick);  }
  handleClick() {    console.log("确认了");  }
  destroy() {    // 第一步：移除事件监听器（关键！）    this.button.removeEventListener("click", this.boundClick);
    // 第二步：手动断开引用链    this.button = null; // 断开对 DOM 节点的引用
    // 第三步：从页面移除 DOM    this.element.remove();    this.element = null; // 断开对 DOM 的引用  }}

class DataPoller {  constructor() {    this.data = [];
    // 每秒拉一次数据    this.timer = setInterval(() => {      fetch("/api/data")        .then((res) => res.json())        .then((data) => {          this.data.push(...data); // 数据越积越多          console.log("当前数据条数:", this.data.length);        });    }, 1000);  }
  stop() {    // 用户点击了"停止"    // 糟糕！忘了 clearInterval    console.log("轮询已停止");  }}
const poller = new DataPoller();// 用户切换了页面，poller 实例理论上应该销毁// 但定时器还在跑，this.data 还在增长// poller 实例被定时器回调引用，永远无法释放

class DataPoller {  constructor() {    this.data = [];    this.timer = null; // 先初始化，方便后续判断  }
  start() {    // 如果已经有定时器，先清掉（防止重复启动）    if (this.timer) clearInterval(this.timer);
    this.timer = setInterval(() => {      fetch("/api/data")        .then((res) => res.json())        .then((data) => {          // 只保留最近 100 条，避免无限增长          this.data = [...this.data, ...data].slice(-100);        });    }, 1000);  }
  stop() {    if (this.timer) {      clearInterval(this.timer); // 关键：清理定时器      this.timer = null; // 断开引用    }    this.data = []; // 清理数据，释放内存  }
  destroy() {    this.stop(); // 确保定时器被清理    this.data = null; // 彻底断开  }}

Array (1000000 items)  → property "data" of Object @12345    → property "poller" of Window      → global property

// 错误做法：Map 会阻止 key 被 GCconst cache = new Map();
function processUser(user) {  if (!cache.has(user)) {    cache.set(user, computeExpensiveData(user)); // user 被 Map 引用，永远不会释放  }  return cache.get(user);}
// 正确做法：WeakMap 不会阻止 key 被 GCconst weakCache = new WeakMap();
function processUser(user) {  if (!weakCache.has(user)) {    weakCache.set(user, computeExpensiveData(user));  }  return weakCache.get(user);}
// 当 user 对象不再被业务代码引用时，GC 会自动清理它// 同时 WeakMap 中对应的条目也会消失（不需要手动删除）

class Component {  constructor() {    this.controller = new AbortController(); // 创建一个信号控制器    const signal = this.controller.signal;
    // 绑定事件时传入 signal    this.button.addEventListener("click", this.handleClick, { signal });    this.input.addEventListener("input", this.handleInput, { signal });    window.addEventListener("resize", this.handleResize, { signal });  }
  destroy() {    // 一键移除所有绑定了这个 signal 的事件监听器    this.controller.abort();  }}

useEffect(() => {  const poller = new DataPoller();  poller.start();
  // 这是 cleanup 函数，组件卸载时执行  return () => {    poller.stop();      // 清理定时器    poller.destroy();   // 清理数据和引用  };}, []);

import { onUnmounted } from "vue";
const timer = setInterval(() => { /* ... */ }, 1000);
onUnmounted(() => {  clearInterval(timer); // 组件卸载时清理});