讲师中心 微信公众号
AI工具推荐 视频效率加速

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

云辰君_6027

云辰君_6027

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

|

995人浏览过

|

来源于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()

Auth0 React
Auth0 React

已弃用 — 请改用 `auth0` 技能(运行 `npx clawhub install auth0`)。适用于为 React 单页应用(SPA)添加 Auth0 登录、登出、受保护路由或用户会话功能。该技能集成 `@auth0/auth0-react` — 即使用户仅表述为“为我的 React 应用添加登录功能”或“保护我的 React 路由”,而未明确提及 Auth0,也应使用此技能。

下载

立即学习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是一款面向对话、写作、编程和推理场景的AI大模型工具。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

超级简历WonderCV

一款AI办公效率工具,主要用于免费求职简历模版下载制作,应届生职场人必备简历制作神器,适合需要提升相关任务效率的用户。

Loomy
Loomy Hot

一款AI工具,主要用于科大讯飞发布的桌面级 AI 助理,比 OpenClaw 更易用、更安全!,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

LibLibAI
LibLibAI Hot

一款AI视频创作工具,主要用于国内领先的AI创意平台,以海量模型、低门槛操作与“创作-分享-商业化”生态,让小白与专业创作者都能高效实现图文乃至视频创意表达,适合需要提升相关任务效率的用户。

AionClaw
AionClaw Hot

AionClaw是一款面向办公、创作和编程任务的AI桌面智能体。

Seko
Seko Hot

一款AI视频创作工具,主要用于商汤科技推出的创编一体的AI短视频创作Agent,适合需要提升相关任务效率的用户。

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

相关专题

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

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

2446

2023.08.11

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

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

4319

2023.11.06

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

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

3087

2026.03.24

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

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

1898

2023.09.20

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

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

3625

2025.09.18

python 全局变量
python 全局变量

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

1490

2025.09.18

c++ 全局变量
c++ 全局变量

本专题整合了c++全局变量的使用、定义、作用域等等内容,阅读专题下面的文章了解更多详细内容。

179

2026.03.17

treenode的用法
treenode的用法

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

2121

2023.12.01

Buffalo框架数据库开发全教程
Buffalo框架数据库开发全教程

本专题围绕Buffalo框架数据库开发,讲解database.yml多环境配置、soda与fizz迁移生成回滚、模型结构体标签、增删改查与条件查询、一对多与多对多关联、数据校验、回调钩子、事务处理及原生SQL执行能力。

0

2026.09.23

热门下载

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

精品课程

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

共14课时 | 1.5万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 5.6万人学习

CSS教程
CSS教程

共754课时 | 93.6万人学习

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

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn