JavaScript 内存泄漏

转载自：http://www.ruanyifeng.com/blog/2017/04/memory-leak.html

1、什么是内存泄漏？

程序的运行须要内存。只要程序提出要求，操做系统或者运行时（runtime）就必须供给内存。
对于持续运行的服务进程（daemon），必须及时释放再也不用到的内存。不然，内存占用愈来愈高，轻则影响系统性能，重则致使进程崩溃。

再也不用到的内存，没有及时释放，就叫作内存泄漏（memory leak）。
有些语言（好比 C 语言）必须手动释放内存，程序员负责内存管理。

char * buffer;
buffer = (char*) malloc(42);

// Do something with buffer

free(buffer);

上面是 C 语言代码，malloc方法用来申请内存，使用完毕以后，必须本身用free方法释放内存。
这很麻烦，因此大多数语言提供自动内存管理，减轻程序员的负担，这被称为"垃圾回收机制"（garbage collector）。

2、垃圾回收机制

垃圾回收机制怎么知道，哪些内存再也不须要呢？
最常使用的方法叫作"引用计数"（reference counting）

语言引擎有一张"引用表"，保存了内存里面全部的资源（一般是各类值）的引用次数。若是一个值的引用次数是0，就表示这个值再也不用到了，所以能够将这块内存释放。

上图中，左下角的两个值，没有任何引用，因此能够释放。
若是一个值再也不须要了，引用数却不为0，垃圾回收机制没法释放这块内存，从而致使内存泄漏。

const arr = [1, 2, 3, 4];
console.log('hello world');

上面代码中，数组[1, 2, 3, 4]是一个值，会占用内存。变量arr是仅有的对这个值的引用，所以引用次数为1。尽管后面的代码没有用到arr，它仍是会持续占用内存。
若是增长一行代码，解除arr对[1, 2, 3, 4]引用，这块内存就能够被垃圾回收机制释放了。

const arr = [1, 2, 3, 4];
console.log('hello world');
arr = null;

上面代码中，arr重置为null，就解除了对[1, 2, 3, 4]的引用，引用次数变成了0，内存就能够释放出来了。
所以，并非说有了垃圾回收机制，程序员就轻松了。你仍是须要关注内存占用：那些很占空间的值，一旦再也不用到，你必须检查是否还存在对它们的引用。若是是的话，就必须手动解除引用。

3、内存泄漏的识别方法

怎样能够观察到内存泄漏呢？
经验法则是，若是连续五次垃圾回收以后，内存占用一次比一次大，就有内存泄漏。这就要求实时查看内存占用。

3.1 浏览器

Chrome 浏览器查看内存占用，按照如下步骤操做。

• 打开开发者工具，选择 Timeline 面板
• 在顶部的Capture字段里面勾选 Memory
• 点击左上角的录制按钮。
• 在页面上进行各类操做，模拟用户的使用状况。
• 一段时间后，点击对话框的 stop 按钮，面板上就会显示这段时间的内存占用状况。
• 若是内存占用基本平稳，接近水平，就说明不存在内存泄漏。
  

反之，就是内存泄漏了。

3.2 命令行

命令行可使用 Node 提供的process.memoryUsage方法。

console.log(process.memoryUsage());
// { rss: 27709440,
//  heapTotal: 5685248,
//  heapUsed: 3449392,
//  external: 8772 }

process.memoryUsage返回一个对象，包含了 Node 进程的内存占用信息。该对象包含四个字段，单位是字节，含义以下。

rss（resident set size）：全部内存占用，包括指令区和堆栈。
heapTotal："堆"占用的内存，包括用到的和没用到的。
heapUsed：用到的堆的部分。
external： V8 引擎内部的 C++ 对象占用的内存。
判断内存泄漏，以heapUsed字段为准。

4、WeakMap

前面说过，及时清除引用很是重要。可是，你不可能记得那么多，有时候一疏忽就忘了，因此才有那么多内存泄漏。
最好能有一种方法，在新建引用的时候就声明，哪些引用必须手动清除，哪些引用能够忽略不计，当其余引用消失之后，垃圾回收机制就能够释放内存。这样就能大大减轻程序员的负担，你只要清除主要引用就能够了。
ES6 考虑到了这一点，推出了两种新的数据结构：WeakSet 和 WeakMap。
它们对于值的引用都是不计入垃圾回收机制的，因此名字里面才会有一个"Weak"，表示这是弱引用。

下面以 WeakMap 为例，看看它是怎么解决内存泄漏的。

const wm = new WeakMap();

const element = document.getElementById('example');

wm.set(element, 'some information');
wm.get(element) // "some information"

上面代码中，先新建一个 Weakmap 实例。而后，将一个 DOM 节点做为键名存入该实例，并将一些附加信息做为键值，一块儿存放在 WeakMap 里面。这时，WeakMap 里面对element的引用就是弱引用，不会被计入垃圾回收机制。
也就是说，DOM 节点对象的引用计数是1，而不是2。这时，一旦消除对该节点的引用，它占用的内存就会被垃圾回收机制释放。Weakmap 保存的这个键值对，也会自动消失。
基本上，若是你要往对象上添加数据，又不想干扰垃圾回收机制，就可使用 WeakMap。

5、WeakMap 示例

WeakMap 的例子很难演示，由于没法观察它里面的引用会自动消失。此时，其余引用都解除了，已经没有引用指向 WeakMap 的键名了，致使没法证明那个键名是否是存在。
我一直想不出办法，直到有一天贺师俊老师提示，若是引用所指向的值占用特别多的内存，就能够经过process.memoryUsage方法看出来。
根据这个思路，网友 vtxf 补充了下面的例子。
首先，打开 Node 命令行。

$ node --expose-gc

上面代码中，--expose-gc参数表示容许手动执行垃圾回收机制。
而后，执行下面的代码。

// 手动执行一次垃圾回收，保证获取的内存使用状态准确
> global.gc(); 
undefined

// 查看内存占用的初始状态，heapUsed 为 4M 左右
> process.memoryUsage(); 
{ rss: 21106688,
  heapTotal: 7376896,
  heapUsed: 4153936,
  external: 9059 }

> let wm = new WeakMap();
undefined

> const b = new Object();
undefined

> global.gc();
undefined
// 此时，heapUsed 仍然为 4M 左右
> process.memoryUsage(); 
{ rss: 20537344,
  heapTotal: 9474048,
  heapUsed: 3967272,
  external: 8993 }

// 在 WeakMap 中添加一个键值对，
// 键名为对象 b，键值为一个 5*1024*1024 的数组  
> wm.set(b, new Array(5*1024*1024));
WeakMap {}

// 手动执行一次垃圾回收
> global.gc();
undefined

// 此时，heapUsed 为 45M 左右
> process.memoryUsage(); 
{ rss: 62652416,
  heapTotal: 51437568,
  heapUsed: 45911664,
  external: 8951 }

// 解除对象 b 的引用  
> b = null;
null

// 再次执行垃圾回收
> global.gc();
undefined

// 解除 b 的引用之后，heapUsed 变回 4M 左右
// 说明 WeakMap 中的那个长度为 5*1024*1024 的数组被销毁了
> process.memoryUsage(); 
{ rss: 20639744,
  heapTotal: 8425472,
  heapUsed: 3979792,
  external: 8956 }

上面代码中，只要外部的引用消失，WeakMap 内部的引用，就会自动被垃圾回收清除。因而可知，有了它的帮助，解决内存泄漏就会简单不少。
===================分割线，以上为阮神的博客内容，看了以后，本人仍是没能理解，因此，继续查找了其余的资料和博客=========================

Mark-and-sweep算法

大多数的垃圾收集器（简称 GC）使用一个叫作 mark-and-sweep 的算法。

JavaScript内存分配和回收的关键词：GC根、做用域

GC根

通常指全局且不会被垃圾回收的对象。好比：window、document或者是页面上存在的dom元素。JavaScript的垃圾回收算法会判断某块对象内存是不是GC根可达（存在一条由GC根对象到该对象的引用），若是不是那这块内存将会被标记回收。

做用域

在JavaScript的做用域里，咱们可以新建对象来分配内存。好比说调用函数，函数执行的过程当中就会建立一块做用域，若是是建立的是做用域内的局部对象，看成用域运行结束后，全部的局部对象（GC根没法触及）都会被标记回收，在JavaScript中能引发做用域分配的有函数调用、with和全局做用域。

做用域的分类：局部做用域、全局做用域、闭包做用域

局部做用域

数调用会建立局部做用域，在局部做用域中的新建的对象，若是函数运行结束后，该对象没有做用域外部的引用，那该对象将会标记回收

全局做用域

每一个JavaScript进程都会有一个全局做用域，全局做用域上的引用的对象都是常驻内存的，直到进程退出内存才会自动释放。

手动释放全局做用域上的引用的对象有两种方式：

global.foo = undefined

从新赋值改变引用

delete global.foo

删除对象属性

闭包做用域

在JavaScript语言中有闭包的概念,**闭包指的是包含自由变量的代码块、自由变量不是在这个代码块内或者任何全局上下文中定义的，而是在定义代码块的环境中定义（局部变量）。

var closure = (function(){
    //这里是闭包的做用域
    var i = 0 // i就是自由变量
    return function（）{
        console.log(i++)
    }
})()

闭包做用域会保持对自由变量的引用。上面代码的引用链就是:

window -> closure -> i

闭包做用域还有一个重要的概念，闭包对象是当前做用域中的全部内部函数做用域共享的，而且这个当前做用域的闭包对象中除了包含一条指向上一层做用域闭包对象的引用外，其他的存储的变量引用必定是当前做用域中的全部内部函数做用域中使用到的变量 ==========写不下去了。。。。下次再完善==========