js的内存泄漏以及es6的weakmap和weakset

什么是内存泄漏？

程序的运行需要内存。只要程序提出要求，操作系统或者运行时就必须供给内存。

对于持续进行的服务进程（daemon），必须及时释放内存，否则内存占用会越来越高，影响系统性能，直至进程崩溃。

所以，不再用到的内存，没有及时释放，就叫做内存泄漏（memory leak）

有些语言，比如C语言，必须手动释放内存，程序员负责内存管理。

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

// do sometjing with buffer

free(buffer);

上面是 C 语言代码，malloc方法用来申请内存，使用完毕之后，必须自己用free方法释放内存。

这很麻烦，所以大多数语言提供自动内存管理，减轻程序员的负担，这被称为“垃圾回收机制”（garbage collector）。

垃圾回收机制

最常用的方法叫做“引用计数”（reference counting）： 语言引擎中有一张“引用表”，保存了内存里所有的资源的引用次数。如果一个值的引用次数是0，就表示这个值不再使用了，因此可以将这块内存释。



上图中，左下角的两个值，没有任何引用，所以可以释放。

如果一个值不再需要了，引用数却不为0，垃圾回收机制无法释放这块内存，从而导致内存泄漏。

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

上面代码中，数组[1, 2, 3, 4]是一个值，会占用内存。变量arr是仅有的对这个值的引用，因此引用次数为1。尽管后面的代码没有用到arr，它还是会持续占用内存。

如果增加一行代码，解除arr对[1, 2, 3, 4]引用，这块内存就可以被垃圾回收机制释放了。

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

上面代码中，arr重置为null，就解除了对[1, 2, 3, 4]的引用，引用次数变成了0，内存就可以释放出来了。

因此，并不是说有了垃圾回收机制，程序员就轻松了。你还是需要关注内存占用：那些很占空间的值，一旦不再用到，你必须检查是否还存在对它们的引用。如果是的话，就必须手动解除引用。

内存泄漏识别

怎样可以观察到内存泄漏呢？

经验法则是，如果连续五次垃圾回收之后，内存占用一次比一次大，就有内存泄漏。这就要求实时查看内存占用。

　浏览器

Chrome浏览器查看内存占用情况，按以下步骤操作：

打开开发者工具，选择 Timeline 面板

在顶部的Capture字段里面勾选 Memory

点击左上角的录制按钮。

在页面上进行各种操作，模拟用户的使用情况。

一段时间后，点击对话框的 stop 按钮，面板上就会显示这段时间的内存占用情况。

如果内存占用基本平稳，接近水平，就说明不存在内存泄漏。



反之，就是内存泄漏了。

weakmap

前面说过，及时清除引用非常重要。但是，你不可能记得那么多，有时候一疏忽就忘了，所以才有那么多内存泄漏。

最好能有一种方法，在新建引用的时候就声明，哪些引用必须手动清除，哪些引用可以不管，当引用消失以后，垃圾回收机制就可以释放内存了，这样就能大大减轻程序员的负担，你只要清除主要的引用就好了。

es6考虑到这点，退出了两种新的数据结构： weakset 和 weakmap 。他们对值的引用都是不计入垃圾回收机制的，所以名字里才会有一个weak，表示这个弱引用。

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

const wm = new WeakMap();
const element = document.getElementById('example');
vm.set(element,'something');
vm.get(element);

上面代码中，先新建一个 Weakmap 实例。然后，将一个 DOM 节点作为键名存入该实例，并将一些附加信息作为键值，一起存放在 WeakMap 里面。这时，WeakMap 里面对element的引用就是弱引用，不会被计入垃圾回收机制。

也就是说，DOM 节点对象的引用计数是1，而不是2。这时，一旦消除对该节点的引用，它占用的内存就会被垃圾回收机制释放。Weakmap 保存的这个键值对，也会自动消失。

基本上，如果你要往对象上添加数据，又不想干扰垃圾回收机制，就可以使用 WeakMap。

参考网址： http://www.ruanyifeng.com/blog/2017/04/memory-leak.html