专栏名称: 前端大全
分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯
目录
相关文章推荐
51好读  ›  专栏  ›  前端大全

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

前端大全  · 公众号  · 前端  · 2025-05-26 21:06

正文

请到「今天看啥」查看全文


:如果一个对象仍然被其他对象引用,就不会被回收。
  • 「可达性分析(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(






    请到「今天看啥」查看全文