资讯专栏INFORMATION COLUMN

JavaScript 垃圾回收

BothEyes1993 / 1979人阅读

摘要:根据的定义,垃圾回收是一种自动的内存管理机制。但在没有结束前,回调函数里的变量以及回调函数本身都无法被回收。在内存泄漏部分,我们讨论了无意的全局变量会带来无法回收的内存垃圾。

根据 Wiki 的定义,垃圾回收是一种自动的内存管理机制。当计算机上的动态内存不再需要时,就应该予以释放,以让出内存。直白点讲,就是程序是运行在内存里的,当声明一个变量、定义一个函数时都会占用内存。内存的容量是有限的,如果变量、函数等只有产生没有消亡的过程,那迟早内存有被完全占用的时候。这个时候,不仅自己的程序无法正常运行,连其他程序也会受到影响。好比生物只有出生没有死亡,地球总有被撑爆的一天。所以,在计算机中,我们需要垃圾回收。需要注意的是,定义中的“自动”的意思是语言可以帮助我们回收内存垃圾,但并不代表我们不用关心内存管理,如果操作失当,JavaScript 中依旧会出现内存溢出的情况。

垃圾回收基于两个原理:

考虑某个变量或对象在未来的程序运行中将不会被访问

向这些对象要求归还内存

而这两个原理中,最主要的也是最艰难的部分就是找到“所分配的内存确实已经不再需要了”。

垃圾回收方法

下面我们看看在 JavaScript 中是如何找到不再使用的内存的。主要有两种方式:引用计数和标记清除。

引用计数(reference counting)

在内存管理环境中,对象 A 如果有访问对象 B 的权限,叫做对象 A 引用对象 B。引用计数的策略是将“对象是否不再需要”简化成“对象有没有其他对象引用到它”,如果没有对象引用这个对象,那么这个对象将会被回收。上例子:

let obj1 = { a: 1 }; // 一个对象(称之为 A)被创建,赋值给 obj1,A 的引用个数为 1 
let obj2 = obj1; // A 的引用个数变为 2

obj1 = 0; // A 的引用个数变为 1
obj2 = 0; // A 的引用个数变为 0,此时对象 A 就可以被垃圾回收了

但是引用计数有个最大的问题: 循环引用。

function func() {
    let obj1 = {};
    let obj2 = {};

    obj1.a = obj2; // obj1 引用 obj2
    obj2.a = obj1; // obj2 引用 obj1
}

当函数 func 执行结束后,返回值为 undefined,所以整个函数以及内部的变量都应该被回收,但根据引用计数方法,obj1 和 obj2 的引用次数都不为 0,所以他们不会被回收。

要解决循环引用的问题,最好是在不使用它们的时候手工将它们设为空。上面的例子可以这么做:

obj1 = null;
obj2 = null;
标记-清除(mark and sweep)

这是 JavaScript 中最常见的垃圾回收方式。为什么说这是种最常见的方法,因为从 2012 年起,所有现代浏览器都使用了标记-清除的垃圾回收方法,除了低版本 IE...它们采用的是引用计数方法。

那什么叫标记清除呢?JavaScript 中有个全局对象,浏览器中是 window。定期的,垃圾回收期将从这个全局对象开始,找所有从这个全局对象开始引用的对象,再找这些对象引用的对象...对这些活着的对象进行标记,这是标记阶段。清除阶段就是清除那些没有被标记的对象。

标记-清除法的一个问题就是不那么有效率,因为在标记-清除阶段,整个程序将会等待,所以如果程序出现卡顿的情况,那有可能是收集垃圾的过程。

2012 年起,所有现代浏览器都使用了这个方法,所有的改进也都是基于这个方法,比如标记-整理方法。

标记清除有一个问题,就是在清除之后,内存空间是不连续的,即出现了内存碎片。如果后面需要一个比较大的连续的内存空间时,那将不能满足要求。而标记-整理方法可以有效地解决这个问题。标记阶段没有什么不同,只是标记结束后,标记-整理方法会将活着的对象向内存的一边移动,最后清理掉边界的内存。不过可以想象,这种做法的效率没有标记-清除高。计算机中的很多做法都是互相妥协的结果,哪有什么十全十美的事儿呢。

内存泄漏

在谈什么是良好实践(这里指有益于内存管理)之前,我想先谈谈内存泄漏,也就是差的实践。内存泄漏是指计算机可用的内存越来越少,主要是因为程序不能释放那些不再使用的内存。

循环引用

这个没什么好说的,上面已经介绍了。

需要强调的一点就是,一旦数据不再使用,最好通过将其值设为 null 来释放其引用,这个方法被称为“解除引用”。

无意的全局变量
function foo(arg) {
    const bar = "";
}

foo();

当 foo 函数执行后,变量 bar 就会被标记为可回收。因为当函数执行时,函数创造了一个作用域来让函数里的变量在里面声明。进入这个作用域后,浏览器就会为变量 bar 创建一个内存空间。当这个函数结束后,其所创建的作用域里的变量也会被标记为垃圾,在下一个垃圾回收周期到来时,这些变量将会被回收。

但事情并不会那么顺利。

function foo(arg) {
    bar = "";
}

foo();

上面的代码就无意中声明了一个全局变量,会得到 window 的引用,bar 实际上是 window.bar,它的作用域在 window 上,所以 foo 函数执行结束后,bar 也不会被内存收回。

另外一种无意的全局变量的情况是:

function foo() {
    this.bar = "";
}

在 foo 函数中,this 指的是 window(详细内容可参见我的另一篇博客:JavaScript this 讲解),犯的错误跟上面类似。

被遗忘的计时器和回调函数
let someResource = getData();
setInterval(() => {
    const node = document.getElementById("Node");
    if(node) {
        node.innerHTML = JSON.stringify(someResource));
    }
}, 1000);

上面的例子中,我们每隔一秒就将得到的数据放入到文档节点中去。但在 setInterval 没有结束前,回调函数里的变量以及回调函数本身都无法被回收。那什么才叫结束呢?就是调用了 clearInterval。如果回调函数内没有做什么事情,并且也没有被 clear 掉的话,就会造成内存泄漏。不仅如此,如果回调函数没有被回收,那么回调函数内依赖的变量也没法被回收。上面的例子中,someResource 就没法被回收。同样的,setTiemout 也会有同样的问题。所以,当不需要 interval 或者 timeout 时,最好调用 clearInterval 或者 clearTimeout。

DOM

在 IE8 以下的版本里,DOM 对象经常会跟 JavaScript 之间产生循环引用。看一个例子:

function setHandler() {
    const ele = document.getElementById("id");
    ele.onclick = function() {};
}

在这个例子中,DOM 对象通过 onclick 引用了一个函数,然而这个函数通过外部的词法环境引用了这个 DOM 对象,形成了循环引用。不过现在不必担心,因为所有现代浏览器都采用了标记-整理方法,避免了循环引用的问题。

除了这种情况,我们现在还会在其他时候在使用 DOM 时出现内存泄漏的问题。当我们需要多次访问同一个 DOM 元素时,一个好的做法是将 DOM 元素用一个变量存储在内存中,因为访问 DOM 的效率一般比较低,应该避免频繁地反问 DOM 元素。所以我们会这样写:

const button = document.getElementById("button");

当删除这个按钮时:

document.body.removeChild(document.getElementById("button"));

虽然这样看起来删除了这个 DOM 元素,但这个 DOM 元素仍然被 button 这个变量引用,所以在内存上,这个 DOM 元素是没法被回收的。所以在使用结束后,还需要将 button 设成 null。

另外一个值得注意的是,代码中保存了一个列表 ul 的某一项 li 的引用,将来决定删除整个列表时,我们自觉上会认为内存仅仅会保留那个特定的 li,而将其他列表项都删除。但事实并非如此,因为 li 是 ul 的子元素,子元素与父元素是引用关系,所以如果代码保存 li 的引用,那么整个 ul 将会继续呆在内存里。

良好实践

1、优化内存的一个最好的衡量方式就是只保留程序运行时需要的数据,对于已经使用的或者不需要的数据,应该将其值设为 null,这上面说过,叫“解除引用”。需要注意的是,解除一个值的引用不代表垃圾回收器会立即将这段内存回收,这样做的目的是让垃圾回收器在下一个回收周期到来时知道这段内存需要回收。

在内存泄漏部分,我们讨论了无意的全局变量会带来无法回收的内存垃圾。但有些时候,我们会有意识地声明一些全局变量,这个时候需要注意,如果声明的变量占用大量的内存,那么在使用完后将变量声明为 null。

2、减少内存垃圾的另一个方法就是避免创建对象。new Object() 是一个比较明显的创建对象的方式,另外 const arr = [];const obj = {};也会创建新的对象。另外下面这种写法在每次调用函数时都会创建一个新的对象:

function func() {
    return function() {};
}

另外,当清空一个数组时,我们通常的做法是 array = [],但这种做法的背后是新建了一个新的数组然后将原来的数组当作内存垃圾。建议的做法是 array.length = 0,这样做不仅可以重用原来的变量,而且还避免创建了新的数组。

因为时间关系,关于垃圾回收的内容将在接下来1-2周内更新完毕,内容涉及更加详细的内存管理、V8 引擎中的垃圾回收等。另外对本文其他内容还有建议的也欢迎留言,我也会一并更新。

参考:

内存管理

A tour of V8: Garbage Collection

Memory leaks

4 Types of Memory Leaks in JavaScript and How to Get Rid Of Them

High-Performance, Garbage-Collector-Friendly Code

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/81055.html

相关文章

  • JavaScript深入浅出第3课:什么是垃圾回收算法?

    摘要:摘要是如何回收内存的深入浅出系列深入浅出第课箭头函数中的究竟是什么鬼深入浅出第课函数是一等公民是什么意思呢深入浅出第课什么是垃圾回收算法最近垃圾回收这个话题非常火,大家不能随随便便的扔垃圾了,还得先分类,这样方便对垃圾进行回收再利用。 摘要: JS是如何回收内存的? 《JavaScript深入浅出》系列: JavaScript深入浅出第1课:箭头函数中的this究竟是什么鬼? Jav...

    AaronYuan 评论0 收藏0
  • javascript 垃圾回收算法

    摘要:它将堆内存一分为二每一部分空间称为。以的垃圾回收堆内存为例做一次小的垃圾回收需要毫秒以上做一次非增量式的垃圾回收甚至要秒以上。这是垃圾回收中引起线程暂停执行的时间在这样的时间花销下应用的性能和响应能力都会直线下降。 我们通常理解的 javascript 垃圾回收机制都停留在表面,会释放不被引用变量内存,最近在读《深入浅出node.js》的书,详细了解了下 v8 垃圾回收的算法,记录了一...

    simon_chen 评论0 收藏0
  • JavaScript 闯关记》之垃圾回收和内存管理

    摘要:内存回收此时,局部变量就没有存在的必要了,因此可以释放它们的内存以供将来使用。局部变量会在它们离开执行环境时自动被解除引用,如下面这个例子所示手工解除的引用由于局部变量在函数执行完毕后就离开了其执行环境,因此无需我们显式地去为它解除引用。 JavaScript 具有自动垃圾收集机制(GC:Garbage Collecation),也就是说,执行环境会负责管理代码执行过程中使用的内存。而...

    Sleepy 评论0 收藏0
  • JavaScript中的垃圾回收和内存泄漏

    摘要:所谓的内存泄漏简单来说是不再用到的内存,没有及时释放。如果一个值不再需要了,引用数却不为,垃圾回收机制无法释放这块内存,从而导致内存泄漏。 前言 程序的运行需要内存。只要程序提出要求,操作系统或者运行时就必须供给内存。所谓的内存泄漏简单来说是不再用到的内存,没有及时释放。为了更好避免内存泄漏,我们先介绍Javascript垃圾回收机制。 在C与C++等语言中,开发人员可以直接控制内存的...

    microelec 评论0 收藏0
  • JavaScript中的垃圾回收和内存泄漏

    摘要:所谓的内存泄漏简单来说是不再用到的内存,没有及时释放。如果一个值不再需要了,引用数却不为,垃圾回收机制无法释放这块内存,从而导致内存泄漏。 前言 程序的运行需要内存。只要程序提出要求,操作系统或者运行时就必须供给内存。所谓的内存泄漏简单来说是不再用到的内存,没有及时释放。为了更好避免内存泄漏,我们先介绍Javascript垃圾回收机制。 在C与C++等语言中,开发人员可以直接控制内存的...

    hover_lew 评论0 收藏0
  • javascript垃圾回收机制和内存管理

    摘要:另一种垃圾收集算法是引用计数,这种算法的思想是跟踪记录所有值被引用的次数。当代码中存在循环引用现象时,引用计数算法就会导致问题。 垃圾回收 javascript不同于c、c++的一个特点是:具有自动的垃圾回收机制,这就意味着,开发人员可以专注于业务,而不必把过多精力放在内存的管理上,提高开发效率。 所谓的垃圾回收就是找出那些不再继续使用的变量,然后释放其占用的内存。为此,垃圾收集器...

    googollee 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<