前端内存泄漏：你的JS代码在偷偷“吃”内存！

当前位置：点晴教程→知识管理交流 →『技术文档交流』

admin

2025年4月10日 10:40 本文热度 102

本文转载于稀土掘金技术社区，作者：DoraBigHead

https://juejin.cn/post/7460150832681943092

「前端内存泄漏：你的JS代码在偷偷“吃”内存！」

❝
“内存泄漏？我的浏览器那么多内存，管他呢！”
“哥，等你页面打开半小时，Chrome开始吃掉你所有的RAM，你就知道怕了……”
❞

你有没有遇到过这样的问题：你的Web应用在刚启动时运行流畅，但使用一段时间后，变得越来越卡？任务管理器一打开，浏览器占用的内存高得离谱，就像一头无底洞的野兽，吞噬着你的RAM，直到你的电脑风扇狂吼，最后页面直接崩溃。

恭喜，你遇上了前端开发者的梦魇——「内存泄漏」。

今天，我们不讲废话，直奔主题，带你彻底搞懂前端内存泄漏的成因、定位、解决方案，让你的代码更优雅，不再成为用户电脑的“内存杀手”！

「啥是前端内存泄漏？」

我们先来复习下，「内存管理的基本原理」：

「分配内存」：JavaScript在执行时，需要分配内存来存储变量、对象、DOM元素等。
「使用内存」：代码运行过程中，会不断创建和操作这些变量。
「释放内存」：当变量不再被引用时，JS引擎的垃圾回收机制（GC，Garbage Collector）会回收这些不再使用的对象。

「问题就出在这里！」 如果某些变量或对象仍然被无意间引用，即使它们已经“没用了”，GC也无法回收它们，导致内存使用量不断增加——这就是「内存泄漏」！

「GC不是万能的，JS的记忆力很差」

很多人以为JS的垃圾回收机制会自动帮你清理所有无用的内存。「大错特错！」 JS的垃圾回收是基于「引用计数」和「可达性分析」来决定对象是否应该被回收的。

「引用计数（Reference Counting）」 ：如果一个对象仍然被其他对象引用，就不会被回收。
「可达性分析（Reachability Analysis）」 ：如果一个对象从全局作用域或当前执行的代码路径上无法访问，它才会被回收。

所以，只要你的代码里「无意间」残留了一些对无用对象的引用，GC就无能为力了。

「常见的前端内存泄漏场景（附真实案例）」

「1. 忘记清理定时器（setInterval / setTimeout）」

「杀伤力指数：🌟🌟🌟🌟🌟」

「案例」：

functionstartTimer() {
  setInterval(() => {
    console.log("Hello, 内存泄漏！");
  }, 1000);
}

这个setInterval会一直执行，哪怕你离开这个页面，它也不会停止，导致整个应用的内存占用越来越高！

「解决方案」：

functionstartTimer() {
  const timerId = setInterval(() => {
    console.log("Hello, 内存泄漏！");
  }, 1000);

  return() => clearInterval(timerId); // 提供一个清理函数
}

在组件销毁时（如useEffect的cleanup或Vue的beforeDestroy钩子），手动清理定时器。

「2. 事件监听器没有被移除」

「杀伤力指数：🌟🌟🌟🌟」

「案例」：

document.getElementById("btn").addEventListener("click", function () {
  console.log("按钮被点击了！");
});

如果这个按钮被动态删除，事件监听器仍然存在，并引用了内存中的对象，导致内存泄漏。

「解决方案」：

const btn = document.getElementById("btn");

functionhandleClick() {
  console.log("按钮被点击了！");
}

btn.addEventListener("click", handleClick);

// 记得在不需要时移除监听器
btn.removeEventListener("click", handleClick);

在Vue或React中，应该在组件卸载时清理事件监听器，比如useEffect的return，或者Vue的beforeUnmount钩子。

「3. 绑定在全局对象（window, document）的变量」

「杀伤力指数：🌟🌟🌟🌟」

「案例」：

window.myData = newArray(1000000).fill("占内存啦！");

只要window.myData存在，这块巨大的数组永远不会被GC回收！

「解决方案」：

window.myData = null; // 手动释放引用

或者使用WeakMap存储不需要长时间保留的数据：

const cache = newWeakMap();
const key = {};
cache.set(key, newArray(1000000).fill("不会导致泄漏"));

WeakMap会自动释放没有强引用的对象。

「4. 组件未正确销毁（React/Vue）」

「杀伤力指数：🌟🌟🌟🌟🌟」

在单页应用（SPA）中，如果组件卸载后仍然持有状态，就会导致内存泄漏。

「React案例」：

useEffect(() => {
  const intervalId = setInterval(() => {
    console.log("还活着！");
  }, 1000);

  return() => clearInterval(intervalId); // 记得清理
}, []);

「Vue案例」：

<script>
exportdefault {
  mounted() {
    this.intervalId = setInterval(() => {
      console.log("还活着！");
    }, 1000);
  },
  beforeDestroy() {
    clearInterval(this.intervalId); // 记得清理
  }
};
</script>

使用Vue3 Composition API：

import { onMounted, onUnmounted } from"vue";

onMounted(() => {
  const timer = setInterval(() => {
    console.log("Hello Vue3!");
  }, 1000);

  onUnmounted(() => clearInterval(timer));
});