浅谈JavaScript垃圾回收与内存泄漏

核心概念

开门见山，我们先了解一下内存泄漏和垃圾回收的概念

什么是内存泄漏

不再用到的数据、变量等仍然占用内存，且被占用的内存没有及时得到释放，即为内存泄漏。

内存泄漏有什么影响

一次内存泄漏的危害或许可以忽略不计，但是内存泄漏堆积会导致很严重的后果。比较严重的时候，无用的内存占用越来越高，可能导致系统卡顿，甚至导致进程崩溃。

什么是垃圾回收

JS 具有自动寻找不再使用的变量并释放其所占用的内存的机制，即为垃圾回收机制。

---

垃圾回收的必要性

由于字符串、对象和数组没有固定大小，所有当他们的大小已知时，才能对他们进行动态的存储分配。JavaScript程序每次创建字符串、数组或对象时，解释器都必须分配内存来存储那个实体。只要像这样动态地分配了内存，最终都要释放这些内存以便他们能够被再用，否则，JavaScript的解释器将会消耗完系统中所有可用的内存，造成系统崩溃。

---

常见的垃圾回收策略

标记清理

JavaScript 最常用的垃圾回收策略是标记清理（mark-and-sweep）。当变量进入当前作用域，比如在函数内部声明一个变量时，这个变量会被加上存在于当前作用域中的标记。而在当前作用域中的变量，逻辑上讲，永远不应该释放它们的内存，因为只要当前作用域中的代码在运行，就有可能用到它们。当变量离开当前作用域时，也会被加上离开当前作用域的标记。

给变量加标记的方式有很多种。比如，当变量进入当前作用域时，反转某一位；或者可以维护“在当前作用域中”和“不在当前作用域中”两个变量列表，可以把变量从一个列表转移到另一个列表。标记过程的实现并不重要，关键是策略。

垃圾回收程序运行的时候，会标记内存中存储的所有变量（标记方法有很多种）。然后，它会将所有在当前作用域中的变量，以及被在当前作用域中的变量引用的变量的标记去掉。在此之后再被加上标记的变量就是待删除的了，原因是任何在当前作用域中的变量都访问不到它们了。随后垃圾回收程序做一次内存清理，销毁带标记的所有值并收回它们的内存。

2008 年以后，IE、Firefox、Opera、Chrome 和 Safari 都在自己的 JavaScript 实现中采用标记清理（或其变体），只是在运行垃圾回收的频率上有所差异。

引用计数

另一种没那么常用的垃圾回收策略是引用计数（reference counting）。其思路是对每个值都记录它被引用的次数。声明变量并给它赋一个引用值时，这个值的引用数为 1。如果同一个值又被赋给另一个变量，那么引用数加 1。类似地，如果保存对该值引用的变量被其他值给覆盖了，那么引用数减 1。当一个值的引用数为 0 时，就说明没办法再访问到这个值了，因此可以安全地收回其内存了。垃圾回收程序下次运行的时候就会释放引用数为 0 的值的内存。

引用计数最早由 Netscape Navigator 3.0 采用，但很快就遇到了严重的问题：循环引用。所谓循环引用，就是对象 A 有一个指针指向对象 B，而对象 B 也引用了对象 A。比如：

function problem() {
    let objectA = new Object()
    let objectB = new Object()
    objectA.someOtherObject = objectB
    objectB.anotherObject = objectA
}

在这个例子中，objectA 和 objectB 通过各自的属性相互引用，意味着它们的引用数都是 2。在标记清理策略下，这不是问题，因为在函数结束后，这两个对象都不在作用域中。而在引用计数策略下，objectA 和 objectB 在函数结束后还会存在，因为它们的引用数永远不会变成 0。如果函数被多次调用，则会导致大量内存永远不会被释放。为此，Netscape 在 4.0 版放弃了引用计数，转而采用标记清理。事实上，引用计数策略的问题还不止于此。

---

可能引起内存泄漏的情况

虽然JavaScript会自动垃圾收集，但是如果我们的代码写法不当，会让变量一直处于“进入环境”的状态，无法被回收。下面列一下内存泄漏常见的几种情况：

意外的全局变量

意外声明全局变量是最常见但也最容易修复的内存泄漏问题。下面的代码没有使用任何关键字声明
变量：

function setName() {
    myName = 'Jake'
}

此时，解释器会把变量 name 当作 window 的属性来创建（相当于 window.name = 'Jake'）。可想而知，在 window 对象上创建的属性，只要 window 本身不被清理就不会消失。这个问题很容易解决，只要在变量声明前头加上 var、let 或 const 关键字即可，这样变量就会在函数执行完毕后离开作用域。

定时器使用不当

定时器也可能会悄悄地导致内存泄漏。下面的代码中，定时器的回调通过闭包引用了外部变量：

let myName = 'Jake'
setInterval(() => {
    console.log(myName)
}, 100)

只要定时器一直运行，回调函数中引用的myName就会一直占用内存。垃圾回收程序当然知道这一点，因而就不会清理外部变量。

闭包使用不当

使用JavaScript闭包很容易在不知不觉间造成内存泄漏。请看下面的例子：

let outer = function () {
    let myName = 'Jake'
    return function () {
        return myName
    }
}

调用outer()会导致分配给myName的内存被泄漏。以上代码执行后创建了一个内部闭包，只要返回的函数存在就不能清理myName，因为闭包一直在引用着它。假如myName的内容很大（不止是一个小字符串)，那可能就是个大问题了。

---

参考资料：《JavaScript高级程序设计》