0

0

如何理解javascript的垃圾回收机制_哪些操作会导致内存泄漏?

狼影

狼影

发布时间:2026-01-06 15:49:27

|

669人浏览过

|

来源于php中文网

原创

javascript垃圾回收通过标记-清除算法判断对象是否可回收:从全局对象等根出发,递归标记所有可达对象,未被标记的即不可达而被回收;循环引用问题使引用计数法被弃用。

如何理解javascript的垃圾回收机制_哪些操作会导致内存泄漏?

JavaScript 垃圾回收怎么判断一个对象该被回收?

JavaScript 的垃圾回收器(GC)不靠程序员手动释放,而是自动运行。它主要用 标记-清除(Mark-and-Sweep) 算法:从全局对象(windowglobalThis)、当前执行上下文的局部变量等“根”出发,递归标记所有能访问到的对象;没被标记的,就被判定为不可达,随后被清除。

注意:引用计数(Reference Counting) 在早期 IE 中用过,但因无法处理循环引用(比如 a.ref = b; b.ref = a)已被主流引擎弃用。现代 V8、SpiderMonkey、JavaScriptCore 全部基于标记-清除或其变种(如 V8 的分代式 GC + 增量标记)。

所以关键不是“谁创建了对象”,而是“还有没有活的引用链能触达它”。只要存在一条从根出发的引用路径,哪怕你已经不用它了,它也不会被回收。

闭包不小心保留了外层作用域,是最常见的泄漏源头

闭包本身不是问题,问题在于闭包函数长期存活,又持有对外层变量的引用,而这些变量本该随外层函数结束而消失。

图酷AI
图酷AI

下载即用!可以免费使用的AI图像处理工具,致力于为用户提供最先进的AI图像处理技术,让图像编辑变得简单高效。

下载

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

  • 典型场景:事件监听器里用了闭包,但监听器没被移除(比如绑定在 document 上),导致整个外层作用域被钉住
  • 定时器回调中引用了大数组或 DOM 节点,且 setTimeout/setInterval 没被 clearTimeout/clearInterval 清理
  • 把局部变量赋给全局对象(如 window.cache = bigData),或者意外挂到 this 上(类方法未绑定时,被当作普通函数调用,this 指向全局)
function createHandler() {
  const hugeArray = new Array(1000000).fill('data');
  return function() {
    console.log(hugeArray.length); // 闭包捕获了 hugeArray
  };
}
const handler = createHandler();
// 如果 handler 被长期持有(比如设为某个按钮的 onclick),hugeArray 就不会被回收

DOM 引用没清理,尤其在单页应用中特别危险

DOM 节点被 JS 引用时,即使它已从文档中 remove()innerHTML = '' 清空,只要 JS 还有变量指向它,它和它的整个子树就仍在内存中。

  • 缓存 DOM 节点但忘记在组件卸载时清空(React 中未在 useEffect 的 cleanup 函数里解绑,Vue 中未在 beforeUnmount 里清理)
  • 使用 addEventListener 绑定了匿名函数,后续无法用 removeEventListener 移除(因为匿名函数每次都是新引用)
  • MapWeakMap 存储 DOM 相关元数据时,误用了强引用的 Map —— 应优先用 WeakMap,它不会阻止键所指 DOM 被回收
// ❌ 错误:用 Map 持有 DOM 节点作为 key → 节点无法被 GC
const metadataMap = new Map();
metadataMap.set(document.getElementById('app'), { timestamp: Date.now() });

// ✅ 正确:WeakMap 不会阻止 key(DOM 节点)被回收
const metadataWM = new WeakMap();
metadataWM.set(document.getElementById('app'), { timestamp: Date.now() });

哪些操作看起来 harmless,其实悄悄吃内存?

有些写法看似无害,但在高频或长生命周期场景下会累积泄漏:

  • console.log(obj) 在 Chrome DevTools 打开时,会保持对 obj 的引用(用于后续展开查看),关闭控制台后才可能释放 —— 生产环境不影响,但调试时别 log 大对象
  • 频繁生成并丢弃正则对象(如 /pattern/g 字面量在循环里),V8 会缓存它们,但缓存有上限;更稳妥的是复用 RegExp 实例(new RegExp('pattern', 'g'))并手动管理
  • 使用 evalFunction 构造函数动态创建函数,会创建无法被静态分析的作用域链,干扰 GC 判断
  • Web Workers 中未正确关闭或未 postMessage 后及时 terminate(),Worker 实例及其全部堆内存持续驻留

真正难排查的泄漏,往往不是某一行代码,而是多个小引用叠加形成的“引用网”——比如一个未注销的事件监听器 → 持有回调函数 → 回调闭包引用了组件实例 → 实例上有对 DOM 和数据的引用。得用 Chrome DevTools 的 Memory 面板拍快照、对比、筛选 Detached DOM tree,才能定位到根因。

热门AI工具

更多
DeepSeek
DeepSeek

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

豆包大模型
豆包大模型

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

通义千问
通义千问

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

腾讯元宝
腾讯元宝

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

文心一言
文心一言

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

讯飞写作
讯飞写作

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

即梦AI
即梦AI

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

ChatGPT
ChatGPT

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

相关专题

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

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

1042

2023.08.11

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

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

827

2023.11.06

chrome什么意思
chrome什么意思

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

1042

2023.08.11

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

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

827

2023.11.06

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

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

435

2023.07.18

堆和栈区别
堆和栈区别

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

601

2023.08.10

go语言闭包相关教程大全
go语言闭包相关教程大全

本专题整合了go语言闭包相关数据,阅读专题下面的文章了解更多相关内容。

151

2025.07.29

golang map内存释放
golang map内存释放

本专题整合了golang map内存相关教程,阅读专题下面的文章了解更多相关内容。

77

2025.09.05

JavaScript浏览器渲染机制与前端性能优化实践
JavaScript浏览器渲染机制与前端性能优化实践

本专题围绕 JavaScript 在浏览器中的执行与渲染机制展开,系统讲解 DOM 构建、CSSOM 解析、重排与重绘原理,以及关键渲染路径优化方法。内容涵盖事件循环机制、异步任务调度、资源加载优化、代码拆分与懒加载等性能优化策略。通过真实前端项目案例,帮助开发者理解浏览器底层工作原理,并掌握提升网页加载速度与交互体验的实用技巧。

23

2026.03.06

热门下载

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

精品课程

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

共42课时 | 9.3万人学习

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号