js垃圾回收机制_js垃圾回收机制只针对复杂数据类型吗
itomcoil 2025-09-21 16:26 5 浏览
好的 你问的是 JavaScript 垃圾回收机制 (Garbage Collection, GC)。这是 JS 内存管理的重要部分,我给你详细梳理:
一、JS 内存管理流程
JavaScript 在浏览器 / Node.js 里运行时,会自动分配和回收内存,开发者 不需要手动 free()。
流程:
- 分配内存:声明变量、对象、函数时,JS 引擎自动分配内存。
- 使用内存:读写变量、调用函数、访问对象属性。
- 释放内存:当变量不再可达时(即无法被访问到),GC 自动回收。
二、垃圾回收的核心思想:可达性 (Reachability)
- “可达”指的是某个值是否能从 根对象 (Root) 被访问到。
- JS 引擎里的根对象一般包括:
- 全局对象(浏览器里是 window,Node 里是 global)
- 当前执行上下文的变量
- 调用栈中的函数参数、局部变量
规则:
只要一个对象是 可达的,它就不会被回收。
一旦对象不可达,就会被标记为垃圾,等待回收。
三、常见垃圾回收算法
1.标记-清除 (Mark-Sweep)
JS 引擎最常用的算法。
过程:
- 从根对象出发,标记所有可达的对象。
- 遍历堆内存,清除没有标记的对象。
缺点:会产生 内存碎片(因为被清除的对象内存不连续)。
2.标记-整理 (Mark-Compact)
是标记-清除的改进。
过程:
- 标记可达对象。
- 将存活对象移动到内存一端,保持内存连续。
- 清理边界之外的空间。
好处:减少内存碎片,适合长期存活的对象(如全局变量)。
3.引用计数 (Reference Counting)
早期的 IE 浏览器使用过,现在基本不用。
规则:
- 对象有一个引用数,引用+1,解除引用-1。
- 引用数为 0 的对象可以回收。
问题:循环引用导致无法回收。
function fn() {
let a = {};
let b = {};
a.obj = b;
b.obj = a; // 循环引用
}
fn();
此时 a 和 b 引用数始终不为 0 → 内存泄漏。
4.分代回收 (Generational GC)
V8 引擎(Chrome / Node.js)采用。
内存分两类区域:
- 新生代 (Young Generation):存放生命周期短的对象(如函数内的临时变量)。
- 算法:Scavenge (Cheney’s Algorithm),把存活对象复制到另一半空间。
- 老生代 (Old Generation):存放长期存活的对象(如全局对象、闭包)。
- 算法:标记-清除 + 标记-整理。
好处:提高效率,大部分对象都很快死亡,避免频繁扫描整个堆。
四、垃圾回收触发时机
JS 引擎会自动触发 GC,常见触发点:
- 堆内存占用达到阈值(比如 V8 新生代 ~32MB 左右)。
- 主线程空闲时(Idle GC)。
- 手动调用(Node.js 有 global.gc(),但要运行时开启 --expose-gc)。
五、常见内存泄漏场景
即使有 GC,写代码不注意还是会泄漏:
- 全局变量
function foo() {
x = 123; // 没有声明,变成 window.x
}
- 未清理的定时器 / 回调
let timer = setInterval(() => {
console.log('running');
}, 1000);
// 忘记 clearInterval(timer)
- DOM 引用未释放
let el = document.getElementById('btn');
document.body.removeChild(el);
// el 变量仍然引用着 DOM
- 闭包导致的意外持有
function outer() {
let bigData = new Array(1000000);
return function inner() {
console.log(bigData.length);
}
}
let innerFn = outer(); // bigData 无法被回收
六、总结
- 核心思想:通过 可达性 (Reachability) 判断对象是否还能被访问。
- 常用算法:
- 标记-清除:主流 GC 算法。
- 标记-整理:解决内存碎片。
- 引用计数:容易内存泄漏(循环引用)。
- 分代回收:V8 的高效实现。
- 注意点:虽然 JS 自动 GC,但错误的引用管理(全局变量、定时器、闭包、DOM)仍会导致内存泄漏。
相关推荐
- 《Queendom》宣布冠军!女团MAMAMOO四人激动落泪
-
网易娱乐11月1日报道据台湾媒体报道,南韩女团竞争回归的生死斗《Queendom》昨(10/31)晚播出大决赛,并以直播方式进行,6组女团、女歌手皆演唱新歌,并加总前三轮的赛前赛、音源成绩与直播现场投...
- 正确复制、重写别人的代码,不算抄袭
-
我最近在一篇文章提到,工程师应该怎样避免使用大量的库、包以及其他依赖关系。我建议的另一种方案是,如果你没有达到重用第三方代码的阈值时,那么你就可以自己编写代码。在本文中,我将讨论一个在重用和从头开始编...
- HTML DOM tr 对象_html event对象
-
tr对象tr对象代表了HTML表格的行。HTML文档中出现一个<tr>标签,就会创建一个tr对象。tr对象集合W3C:W3C标签。集合描述W3Ccells返回...
- JS 打造动态表格_js如何动态改变表格内容
-
后台列表页最常见的需求:点击表头排序+一键全选。本文用原生js代码实现零依赖方案,涵盖DOM查询、排序算法、事件代理三大核心技能。效果速览一、核心思路事件入口:为每个<th>绑...
- 连肝7个晚上,总结了66条计算机网络的知识点
-
作者|哪吒来源|程序员小灰(ID:chengxuyuanxiaohui)计算机网络知识是面试常考的内容,在实际工作中经常涉及。最近,我总结了66条计算机网络相关的知识点。1、比较http0....
- Vue 中 强制组件重新渲染的正确方法
-
作者:MichaelThiessen译者:前端小智来源:hackernoon有时候,依赖Vue响应方式来更新数据是不够的,相反,我们需要手动重新渲染组件来更新数据。或者,我们可能只想抛开当前的...
- 为什么100个前端只有1人能说清?浏览器重排/重绘深度解析
-
面试现场的"致命拷问""你的项目里做过哪些性能优化?能具体讲讲重排和重绘的区别吗?"作为面试官,我在秋招季连续面试过100多位前端候选人,这句提问几乎成了必考题。但令...
- HTML DOM 介绍_dom4j html
-
HTMLDOM(文档对象模型)是一种基于文档的编程接口,它是HTML和XML文档的编程接口。它可以让开发人员通过JavaScript或其他脚本语言来访问和操作HTML和XML文档...
- JavaScript 事件——“事件流和事件处理程序”的注意要点
-
事件流事件流描述的是从页面中接收事件的顺序。IE的事件流是事件冒泡流,而NetscapeCommunicator的事件流是事件捕获流。事件冒泡即事件开始时由最具体的元素接收,然后逐级向上传播到较为不...
- 探秘 Web 水印技术_水印制作网页
-
作者:fransli,腾讯PCG前端开发工程师Web水印技术在信息安全和版权保护等领域有着广泛的应用,对防止信息泄露或知识产品被侵犯有重要意义。水印根据可见性可分为可见水印和不可见水印(盲水印)...
- 国外顶流网红为流量拍摄性侵女学生?仅被封杀三月,回归仍爆火
-
曾经的油管之王,顶流网红DavidDobrik复出了。一切似乎都跟他因和成员灌酒性侵女学生被骂到退网之前一样:住在950万美元的豪宅,开着20万美元的阿斯顿马丁,每条视频都有数百万观看...人们仿佛...
- JavaScript 内存泄漏排查方法_js内存泄漏及解决方法
-
一、概述本文主要介绍了如何通过Devtools的Memory内存工具排查JavaScript内存泄漏问题。先介绍了一些相关概念,说明了Memory内存工具的使用方式,然后介绍了堆快照的...
- 外贸独立站,网站优化的具体内容_外贸独立站,网站优化的具体内容有哪些
-
Wordpress网站优化,是通过优化代码、数据库、缓存、CSS/JS等内容,提升网站加载速度、交互性和稳定性。网站加载速度,是Google搜索引擎的第一权重,也是SEO优化的前提。1.优化渲染阻塞。...
- 这8个CSS工具可以提升编程速度_css用什么编译器
-
下面为大家推荐的这8个CSS工具,有提供函数的,有提供类的,有提取代码的,还有收集CSS的统计数据的……请花费两分钟的时间看完这篇文章,或许你会找到意外的惊喜,并且为你的编程之路打开了一扇新的大门。1...
- vue的理解-vue源码 历史 简介 核心特性 和jquery区别 和 react对比
-
一、从历史说起Web是WorldWideWeb的简称,中文译为万维网我们可以将它规划成如下的几个时代来进行理解石器时代文明时代工业革命时代百花齐放时代石器时代石器时代指的就是我们的静态网页,可以欣...
- 一周热门
- 最近发表
- 标签列表
-
- ps图案在哪里 (33)
- super().__init__ (33)
- python 获取日期 (34)
- 0xa (36)
- super().__init__()详解 (33)
- python安装包在哪里找 (33)
- linux查看python版本信息 (35)
- python怎么改成中文 (35)
- php文件怎么在浏览器运行 (33)
- eval在python中的意思 (33)
- python安装opencv库 (35)
- python div (34)
- sticky css (33)
- python中random.randint()函数 (34)
- python去掉字符串中的指定字符 (33)
- python入门经典100题 (34)
- anaconda安装路径 (34)
- yield和return的区别 (33)
- 1到10的阶乘之和是多少 (35)
- python安装sklearn库 (33)
- dom和bom区别 (33)
- js 替换指定位置的字符 (33)
- python判断元素是否存在 (33)
- sorted key (33)
- shutil.copy() (33)