0

0

如何理解JavaScript中的垃圾回收机制_JavaScript内存泄漏通常如何产生

幻影之瞳

幻影之瞳

发布时间:2026-01-06 21:04:02

|

975人浏览过

|

来源于php中文网

原创

现代 JavaScript 引擎不使用引用计数,而是以标记-清除为主,辅以增量标记和分代式垃圾回收;引用计数因无法处理循环引用已被弃用。

如何理解javascript中的垃圾回收机制_javascript内存泄漏通常如何产生

JavaScript 垃圾回收靠的是引用计数还是标记清除?

现代 JavaScript 引擎(V8、SpiderMonkey、JavaScriptCore)**不使用引用计数**,而是以标记-清除(Mark-and-Sweep)为主,辅以增量标记(Incremental Marking)分代式垃圾回收(Generational GC)优化。引用计数因无法处理循环引用(如 a.ref = b; b.ref = a)早已被弃用。

引擎会定期启动 GC:先从根对象(全局对象、当前执行上下文中的局部变量、中引用等)出发,递归标记所有可达对象;未被标记的即为“不可达”,随后被清除。

  • 全局变量闭包中被捕获的变量DOM 节点引用定时器回调中的外层作用域变量 都可能让对象长期“可达”,阻碍回收
  • V8 将对象分为新生代(Young Generation)老生代(Old Generation),小对象先分配在新生代,多次存活后晋升到老生代——老生代 GC 成本更高,更需避免无谓驻留
  • 频繁触发 GC(如每秒多次)往往意味着内存压力大,可通过 Chrome DevTools 的 Memory > Allocation instrumentation on timeline 追踪对象生命周期

闭包意外保留大对象是常见泄漏源

闭包本身不是问题,但若内部函数被意外长期持有(比如挂到全局、传给事件监听器、塞进定时器),它所捕获的整个外层作用域就无法释放。

function createHandler() {
  const bigData = new Array(1000000).fill('leak');
  return function () {
    console.log('still alive');
  };
}
// ❌ 错误:handler 持有对 bigData 的引用,即使不用 bigData 也回不去了
const handler = createHandler();
window.importantHandler = handler; // 意外挂载到全局
  • 检查闭包是否真的需要捕获全部变量:可用letconst缩小作用域,或显式解构提取必要值
  • 避免把闭包赋值给windowdocument或长期存在的对象(如单例类实例)
  • 使用WeakMapWeakRef(ES2021)缓存关联数据,它们不阻止回收

事件监听器和 DOM 引用没清理就会卡住整棵子树

只要一个 JS 对象还引用着某个 DOM 元素,该元素及其所有子节点(包括内联事件、CSS 样式、布局信息)都无法被回收——哪怕它已从文档中remove()

吐槽大师
吐槽大师

吐槽大师(Roast Master) - 终极 AI 吐槽生成器,适用于 Instagram,Facebook,Twitter,Threads 和 Linkedin

下载

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

  • 手动绑定的事件监听器必须配对调用removeEventListener(),尤其注意匿名函数无法移除:el.addEventListener('click', fn) ✅,el.addEventListener('click', () => {})
  • 使用AbortController统一控制多个异步操作和监听器:addEventListener(..., { signal })
  • 框架组件卸载时(如 React useEffect cleanup、Vue beforeUnmount),务必清理定时器、IntersectionObserverResizeObserver 等持有 DOM 引用的实例

定时器和 Promise 微任务链容易隐式延长生命周期

setTimeoutsetInterval、未处理的Promise拒绝、requestIdleCallback 回调里的闭包,都会让其作用域持续存活。

function startPolling() {
  const cache = {};
  setInterval(() => {
    fetch('/api/data').then(res => {
      cache[Date.now()] = res; // cache 不断增长
      // ❌ 忘记清理过期项,也不清除定时器
    });
  }, 5000);
}
startPolling(); // cache 和定时器 ID 永远不会被回收
  • 总是保存setInterval返回的 ID,并在不需要时调用clearInterval(id)
  • 避免在定时器回调中累积数据结构(如Array.pushMap.set),或设置自动淘汰策略(LRU、TTL)
  • 未捕获的Promise拒绝会留在微任务队列中,虽不直接阻止对象回收,但可能掩盖真正泄漏点;用window.addEventListener('unhandledrejection')监控

最隐蔽的泄漏往往不在代码逻辑里,而在你认为“它应该自己消失”的地方——比如一个被遗忘的console.log(obj)会让obj在 DevTools 控制台中保持引用,直到你刷新或清空控制台。

热门AI工具

更多
DeepSeek
DeepSeek

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

豆包大模型
豆包大模型

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

WorkBuddy
WorkBuddy

腾讯云推出的AI原生桌面智能体工作台

腾讯元宝
腾讯元宝

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

文心一言
文心一言

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

讯飞写作
讯飞写作

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

即梦AI
即梦AI

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

ChatGPT
ChatGPT

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

相关专题

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

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

1060

2023.08.11

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

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

842

2023.11.06

chrome什么意思
chrome什么意思

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

1060

2023.08.11

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

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

842

2023.11.06

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

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

562

2023.09.20

全局变量怎么定义
全局变量怎么定义

本专题整合了全局变量相关内容,阅读专题下面的文章了解更多详细内容。

95

2025.09.18

python 全局变量
python 全局变量

本专题整合了python中全局变量定义相关教程,阅读专题下面的文章了解更多详细内容。

106

2025.09.18

treenode的用法
treenode的用法

​在计算机编程领域,TreeNode是一种常见的数据结构,通常用于构建树形结构。在不同的编程语言中,TreeNode可能有不同的实现方式和用法,通常用于表示树的节点信息。更多关于treenode相关问题详情请看本专题下面的文章。php中文网欢迎大家前来学习。

550

2023.12.01

TypeScript类型系统进阶与大型前端项目实践
TypeScript类型系统进阶与大型前端项目实践

本专题围绕 TypeScript 在大型前端项目中的应用展开,深入讲解类型系统设计与工程化开发方法。内容包括泛型与高级类型、类型推断机制、声明文件编写、模块化结构设计以及代码规范管理。通过真实项目案例分析,帮助开发者构建类型安全、结构清晰、易维护的前端工程体系,提高团队协作效率与代码质量。

26

2026.03.13

热门下载

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

精品课程

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

共14课时 | 0.9万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.6万人学习

CSS教程
CSS教程

共754课时 | 42.9万人学习

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

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