JavaScript常见的内存泄漏

一.什么是内存泄漏

当应用程序不再需要的内存，由于某种原因未返回给操作系统或者空闲内存，这将会导致程序变慢、卡顿、高延迟

二.内存泄漏的主要原因

JavaScript内存泄漏的主要原因在于一些不再需要的引用（Unwanted References）。

所谓的Unwanted References指的是：有一些内存，其实开发人员已经不再需要了，但是由于某种原因，这些内存仍然被标记并保留在活动根目录树中。Unwanted References就是指对这些内存的引用。在JavaScript上下文中，Unwanted References是一些不再使用的变量，这些变量指向了原本可以释放的一些内存。

三.常见的内存泄漏

1.全局变量造成的内存泄漏

在JS的运行机制中，全局变量是直接由根节点所引用的，所以在整个程序的生命周期中都不会被回收

  • 引用未声明变量
    1
    2
    3
    function foo(arg) {
        bar = "this is a hidden global variable";
    }
  • 将变量设置为全局变量window的属性
    1
    2
    3
    function foo(arg) {
        window.bar = "this is an explicit global variable";
    }
  • 盲目使用this，导致挂载到全局变量的属性上
    1
    2
    3
    4
    function foo() {
        this.variable = "potential accidental global";
    }
    foo();

综上：
1.避免意外地创建全局变量，可以使用严格模式。
2.减少创建全局变量
3.如果必须使用全局变量来存储大量数据，必须确保在处理完数据后将其放置null或者从新分配

2.忘记释放的计时器

3.多处引用

当多个变量均引用同一个对象时，只要有一个引用没有清除，都将导致被引用的对象无法GC。
例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var elements = {
    button: document.getElementById('button'),
    image: document.getElementById('image'),
    text: document.getElementById('text')
};

function doStuff() {
    image.src = 'http://some.url/image';
    button.click();
    console.log(text.innerHTML);
    // Much more logic
}

function removeButton() {
    // The button is a direct child of body.
    document.body.removeChild(document.getElementById('button'));

    // At this point, we still have a reference to #button in the global
    // elements dictionary. In other words, the button element is still in
    // memory and cannot be collected by the GC.s
}

上面的代码示例中，#button被两个变量引用，一个在DOM树中，另一个在elements对象中。如果将来决定回收button，需要将两个引用都释放，而上面的代码仅仅只释放了DOM中的button引用，而element对象中依然保持着对button的引用，所以button不会被GC

还有这么一种情况： 如果我们想要回收某个table，但我们保持着对这个table中某个单元格（cell）的引用，这个时候将导致整个table都保存在内存中，无法GC。

4.闭包

闭包(Closure)：闭包是一个函数，它可以访问那些定义在它的包围作用域（Enclosing Scope）里的变量，即使这个包围作用域已经结束。因此，闭包具有记忆周围环境（Context）的功能。
例子：

1
2
3
4
5
6
7
8
9
10
11
12
var newElem;
function outer() {
   var someText = new Array(1000000);
   var elem = newElem;
   function inner() {
       if (elem) return someText;
   }
   return function () {};
}
setInterval(function () {
   newElem = outer();
}, 5);

在这个例子中，有两个闭包：一个是inner，另一个是匿名函数function () {}。其中，inner闭包引用了someText和elem，并且，inner永远也不会被调用。可是，我们需要注意：相同父作用域的闭包，他们能够共享context。 也就是说，在这个例子中，inner的someText和elem将和匿名函数function () {}共享。然而，这个匿名函数之后会被return返回，并且赋值给newElem。只要newElem还引用着这个匿名函数，那么，someText和elem就不会被GC。

同时，我们还要注意到，outer函数内部执行了var elem = newElem;，而这个newElem引用了上一次调用的outer返回的匿名函数。试想，第n次调用outer将保持着第n-1次调用的outer中的匿名函数，而这个匿名函数由保持着对elem的引用，进而保持着对n-2次的…因此，这将造成内存泄漏。

解决方案：setInterval中的参数1的代码改为newElem = outer()();

5.console.log

由于我们传给console.log的对象需要在控制台打印出来查看信息，所以这部分对象的内存是不会被垃圾回收的，这样也会造成内存泄漏。

阅读链接：
https://auth0.com/blog/four-types-of-leaks-in-your-javascript-code-and-how-to-get-rid-of-them/