javascript的垃圾回收如何工作_如何避免内存泄漏

夢幻星辰

夢幻星辰

2026-01-15

629人浏览

原创

javascript垃圾回收采用标记-清除机制,从根对象出发标记可达对象,未标记者被清除;常见泄漏源包括未解绑事件监听器、未清除定时器、闭包过度捕获及缓存未释放,需用chrome memory面板分析堆快照定位悬空引用。

javascript的垃圾回收如何工作_如何避免内存泄漏

JavaScript 的垃圾回收不靠你手动 delete 或 null,而靠引擎自动判断“这个对象还能不能被访问到”。只要它还能从根(比如 window、当前函数的局部变量)顺着引用链摸到,就不会被回收——哪怕你已经把它设为 null,只要别的地方还留着引用,它就照活不误。

标记清除是核心机制,不是引用计数

现代引擎(V8、SpiderMonkey)全用标记-清除(Mark-and-Sweep),不是引用计数。后者早被淘汰,因为它搞不定循环引用:两个对象互相 a.ref = b; b.ref = a,但外部没人再用它们,引用计数永远是 1,内存就卡死不放。

标记清除分两步:

  • 标记阶段:从根出发,递归遍历所有能触达的对象,打上“活跃”标记
  • 清除阶段:把没被标记的对象整块内存释放

这个过程不是实时的,而是在空闲或内存压力大时触发,所以你看到内存曲线有延迟回落,属正常。

事件监听器没配对移除,DOM 就悬在半空

这是最常见泄漏点:元素已从 DOM 中 removeChild 或被框架卸载,但 addEventListener 绑定的监听器还在,尤其用匿名函数或闭包时,整个作用域链都被锁住。

典型错误写法:

element.addEventListener('click', () => {
  console.log(this.data); // 闭包捕获了 this 和大量数据
});

正确做法:

ApiPost接口调试与文档生成工具
ApiPost接口调试与文档生成工具

ApiPost是一个支持团队协作,支持模拟POST、GET、PUT等常见请求,并可直接生成文档的API调试、管理工具,ApiPost是后台接口开发者或前端、接口测试人员的工作必备工具。快速生成、一键导出API文档。感兴趣的朋友快来下载吧。软件说明ApiPost官方版是一款十分出色的接口调试与文档生成工具,ApiPost官方版界面美观大方,功能强劲实用,支持团队协作,支持模拟POST、GET、PUT等常见请求,是后台接口开发者或前端、接口测试人员的工作必备工具。软件特色更方便支持接口调试的同时快速生成、一键

下载
  • 用具名函数 + removeEventListener 配对清理
  • 组件级开发中,在 useEffect 返回函数(React)或 beforeUnmount(Vue)里统一解绑
  • 优先用 { once: true } 选项,适合只触发一次的场景
  • 对动态节点,改用事件委托,避免逐个绑定

定时器和闭包联手“绑架” this 和大数组

setInterval 回调里用了 this.statelargeList,组件卸载后定时器还在跑?那整个组件实例和它闭包里的所有数据都动不了。

同样,循环中定义函数也危险:

for (let i = 0; i  {
    console.log(dataList); // 每次都捕获整个 dataList,不是 item.id
  });
}

结果:1000 个闭包全锁住 dataList,它永远不可达不了。

改进方式:

  • 组件销毁前必须调用 clearInterval(id)clearTimeout(id)
  • 闭包里只取真正需要的值,比如 const id = item.id; handler = () => console.log(id)
  • 大型缓存对象不用时,显式设为 cache = null,别只清空数组 arr.length = 0
  • 考虑用 WeakMap 存元数据:键是 DOM 元素,值不会阻止元素被回收

排查泄漏不能靠猜,得看堆快照

光靠代码检查容易漏,必须用工具验证。Chrome DevTools 的 Memory 面板 是主力:

  • 操作前拍一个堆快照(Heap Snapshot),操作后(比如跳转页面、关闭弹窗)再拍一个,用 Comparison 视图对比
  • 重点筛:Detached DOM tree(游离 DOM)、重复增长的 Array / Object / 自定义类实例
  • 点开可疑对象,看右侧 Retainers 标签,顺引用链往上找谁在拽着它不放
  • 配合 Allocation Timeline 录制,观察某段 JS 执行是否持续分配却不释放

真正难的不是理解 GC 原理,而是发现那些“看起来已经删了,其实还被某个闭包、定时器、全局属性悄悄攥着”的引用链。

Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
chrome什么意思
chrome什么意思

chrome是浏览器的意思,由Google开发的网络浏览器,它在2008年首次发布,并迅速成为全球最受欢迎的浏览器之一。本专题为大家提供chrome相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

1974

5

chrome无法加载插件怎么办
chrome无法加载插件怎么办

chrome无法加载插件可以通过检查插件是否已正确安装、禁用和启用插件、清除插件缓存、更新浏览器和插件、检查网络连接和尝试在隐身模式下加载插件方法解决。更多关于chrome相关问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

2023.11.06

2410

7

Chrome开启无痕模式
Chrome开启无痕模式

本专题整合了Chrome无痕模式开启相关内容,阅读专题下面的文章了解更多详细教程。

2026.03.24

2057

22

c语言中null和NULL的区别
c语言中null和NULL的区别

c语言中null和NULL的区别是:null是C语言中的一个宏定义,通常用来表示一个空指针,可以用于初始化指针变量,或者在条件语句中判断指针是否为空;NULL是C语言中的一个预定义常量,通常用来表示一个空值,用于表示一个空的指针、空的指针数组或者空的结构体指针。

2023.09.22

420

3

java中null的用法
java中null的用法

在Java中,null表示一个引用类型的变量不指向任何对象。可以将null赋值给任何引用类型的变量,包括类、接口、数组、字符串等。想了解更多null的相关内容,可以阅读本专题下面的文章。

2024.03.01

1487

6

c语言const用法
c语言const用法

const是关键字,可以用于声明常量、函数参数中的const修饰符、const修饰函数返回值、const修饰指针。详细介绍:1、声明常量,const关键字可用于声明常量,常量的值在程序运行期间不可修改,常量可以是基本数据类型,如整数、浮点数、字符等,也可是自定义的数据类型;2、函数参数中的const修饰符,const关键字可用于函数的参数中,表示该参数在函数内部不可修改等等。

2023.09.20

1128

7

堆和栈的区别
堆和栈的区别

堆和栈的区别:1、内存分配方式不同;2、大小不同;3、数据访问方式不同;4、数据的生命周期。本专题为大家提供堆和栈的区别的相关的文章、下载、课程内容,供大家免费下载体验。

2023.07.18

2271

5

堆和栈区别
堆和栈区别

堆(Heap)和栈(Stack)是计算机中两种常见的内存分配机制。它们在内存管理的方式、分配方式以及使用场景上有很大的区别。本文将详细介绍堆和栈的特点、区别以及各自的使用场景。php中文网给大家带来了相关的教程以及文章欢迎大家前来学习阅读。

2023.08.10

1166

6

length函数用法
length函数用法

length函数用于返回指定字符串的字符数或字节数。可以用于计算字符串的长度,以便在查询和处理字符串数据时进行操作和判断。 需要注意的是length函数计算的是字符串的字符数,而不是字节数。对于多字节字符集,一个字符可能由多个字节组成。因此,length函数在计算字符串长度时会将多字节字符作为一个字符来计算。更多关于length函数的用法,大家可以阅读本专题下面的文章。

2023.09.19

1236

6

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app快速上手
uni-app快速上手

共0课时 | 0人学习

Vue 教程
Vue 教程

共42课时 | 15.6万人学习

Vue3.x 工具篇--十天技能课堂
Vue3.x 工具篇--十天技能课堂

共26课时 | 2.2万人学习