JS 的垃圾回收机制

前言

垃圾回收(Garbage Collection)是一种内存管理机制,用于检测和清理不再被程序使用的内存。垃圾回收器会在 JS 引擎(浏览器或者 nodejs)内部周期性地运行,开发者无需手动操作。

但是,了解垃圾回收机制的工作原理有助于我们写出更加高效的 JS 代码,使 JS 引擎更好的帮助我们完成垃圾回收,避免我们开发的应用出现内存泄漏问题。

垃圾是怎样产生的?

JS 中的数据类型有原始类型和引用类型,原始类型占用的内存极小,一般是字符串、数字、布尔值这些,他们被存放在栈(stack)中。引用类型可以是数组、普通对象或者函数,他们一般会包含较多的数据,所以引用类型的实际数据存放在内存的堆(heap)中,然后在栈中会存放一个指向该实际数据的地址。

const str = "abc" // 原始类型
const obj = { foo: "bar" } // 引用类型

在 JS 中每声明一个变量,该应用所占的内存就会相应的增加,但机器的内存是有限的,内存占用不能无限制的增加。那些不再被程序使用的数据,就被称为垃圾,他们所占用的内存就会被 JS 引擎的垃圾回收机制回收。

垃圾回收机制会回收哪些垃圾?

当一个对象不在任何地方被引用时(如何判断是否被引用由算法决定,后面会介绍算法),垃圾回收器就需要将这些对象进行标记,并在适当的时机回收它们的内存。

以下面这段代码为例:

function myFunction() {
  const obj = { foo: "bar" }
  // do something
}

myFunction()

这段代码中的 obj 对象在 myFunction 函数执行之后,就已经没有被引用了,就需要被回收。

但当某个对象从开发角度上来说不再被使用了,却意外的仍然在某个地方被引用,垃圾回收器就无法回收它的内存,就会造成内存泄漏(内存逐渐累积,程序占用的内存越来越多,当超过系统的可用内存时,就会造成程序崩溃)。

比如下面这段代码中 obj 对象就有可能不会被回收(取决于算法):

function myFunction() {
  const obj = { foo: "bar" }

  setTimeout(() => {
    console.log(obj.foo)
  }, 1000)
}

myFunction()

因为 obj 作为闭包中的引用传递给了定时器的回调函数,即使 myFunction 执行完毕,由于定时器没有被清除,obj 仍然被定时器回调函数持有引用,就可能导致 obj 不会被垃圾回收。

垃圾回收的算法

目前 JavaScript 中的垃圾回收机制主要基于以下两种算法:

引用计数(Reference-Counting)算法

该算法的原理是,记录每个对象的引用次数,引用增加时计数器加一,引用减少时减一,当引用计数变为零时,就表示没有任何引用指向该对象了,该对象就可以被回收。

这种规则导致该算法有一个缺点:无法回收循环引用的对象,因为互相引用的对象在程序结束时都至少有一次引用。比如下面这段代码:

function myFunction() {
  const a = {}
  const b = {}
  a.b = b // a 引用了 b
  b.a = a // b 引用了 a
}

myFunction()

在该算法下,即使在 myFunction 执行之后,对象 ab 也不会被回收。

IE 6 和 IE 7 使用的就是这种算法。

标记-清除(Mark-and-Sweep)算法

这是一种更常见的垃圾回收算法。核心概念是对象是否可达,当一个对象不在任何地方被引用时,它就是不可达,相反就是可达。该算法会从根对象(全局对象、函数执行上下文)开始,通过遍历对象之间的引用关系,记录所有可达和不可达的对象。然后,回收器清除不可达的对象,释放其内存。

该算法解决了引用计数算法的循环引用问题,在刚刚那段代码中,函数 myFunction 执行之后,对象 ab 从全局对象出发就无法获取了。因此,他们将会被回收。

从 2012 年起,所有现代浏览器都使用了这种算法。

Chrome 和 nodejs 的垃圾回收算法

Chrome 和 nodejs 都采用了谷-歌开源的 V8 引擎。V8 引擎的垃圾回收机制采用了标记-清除算法,但在此基础做了一些优化。

V8 引擎将内存分为新生代(Young Generation)和老生代(Old Generation)。大多数对象在新生代中创建,经过一定时间后,如果它们仍然存活,就会被晋升到老生代。

Scavenger 垃圾回收(新生代)

新生代使用了 Scavenger 垃圾回收算法,它将内存划分为一个存活区域和一个空闲区域。对象首先被分配到存活区域,当存活区域满时,会执行垃圾回收操作,将存活的对象复制到空闲区域,并清空存活区域。

Mark-Sweep-Compact 垃圾回收(老生代)

老生代中使用了 Mark-Sweep-Compact(标记-清除-整理)垃圾回收算法。它首先标记所有的存活对象,然后清除掉未被标记的对象,最后进行内存整理,使存活对象连续排列,减少内存碎片。

增量垃圾回收

V8 引擎还支持增量垃圾回收。他会将垃圾回收操作分成多个小步骤执行,每个步骤之间会插入一些 JavaScript 代码的执行,从而避免长时间的垃圾回收造成的界面卡顿。

空闲时间垃圾回收

V8 引擎还在空闲时间执行部分垃圾回收操作,以充分利用闲置的计算资源。这些时间段可能是在程序等待用户输入、网络请求返回、或者其他暂时没有任务需要处理的情况下出现的。

需要手动清除的内存

垃圾回收机制会根据算法智能的回收大部分的内存,但由于业务逻辑的关系,它无法明确知道在我们的写的(垃圾)代码中,哪些对象其实是不再使用的,所以我们在开发过程中需要及时的清除不需要的事件监听、定时器、计时器,避免循环引用,以及避免使用闭包。

清除事件监听

const myButton = document.getElementById("myButton")

function handleClick() {
  console.log("Button clicked!")
}

// 添加事件监听器
myButton.addEventListener("click", handleClick)

// 在页面卸载或元素移除时解除事件监听器
window.addEventListener("beforeunload", () => {
  myButton.removeEventListener("click", handleClick)
})

执清除定时器、计时器

const timer = setTimeout(() => {}, 500)

// 在页面卸载或元素移除时解除事件监听器
window.addEventListener("beforeunload", () => {
  clearTimeout(timer)
})

手动调用垃圾回收

一般情况下我们无需手动调用垃圾回收,但有些浏览器支持主动触发垃圾回收。

IE 浏览器

if (typeof window.CollectGarbage === "function") {
  window.CollectGarbage()
}

Opera 浏览器

if (window.opera && typeof window.opera.collect === "function") {
  window.opera.collect()
}

总结

总而言之,垃圾回收是一项必不可少的内存管理机制,希望大家都能理解其原理,并运用在实际开发中,避免造成内存泄漏的问题,提高应用程序的性能和用户体验。


参考文档

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容