0

0

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

夢幻星辰

夢幻星辰

发布时间:2026-01-15 20:08:34

|

609人浏览过

|

来源于php中文网

原创

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

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

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

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

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

标记清除分两步:

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

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

立即学习Java免费学习笔记(深入)”;

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

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

典型错误写法:

Article Forge
Article Forge

行业文案AI写作软件,可自动为特定主题或行业生成内容

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

正确做法:

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

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

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

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

for (let i = 0; i < 1000; i++) {
  elements[i].addEventListener('click', () => {
    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 原理,而是发现那些“看起来已经删了,其实还被某个闭包、定时器、全局属性悄悄攥着”的引用链。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

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

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

1057

2023.08.11

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

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

838

2023.11.06

chrome什么意思
chrome什么意思

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

1057

2023.08.11

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

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

838

2023.11.06

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

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

254

2023.09.22

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

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

1089

2024.03.01

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

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

562

2023.09.20

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

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

443

2023.07.18

C# ASP.NET Core微服务架构与API网关实践
C# ASP.NET Core微服务架构与API网关实践

本专题围绕 C# 在现代后端架构中的微服务实践展开,系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例,帮助开发者掌握构建高可用微服务系统的关键技术,提高系统的可扩展性与维护效率。

3

2026.03.11

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Vue 教程
Vue 教程

共42课时 | 9.5万人学习

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

共26课时 | 1.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号