JQuery 中remove()的内存泄漏问题

因为前端没有基础，在结合layUI 写项目的时候只能不停地重绘DOM，于是便有了这个问题。

发现问题：

小白虽然前端没基础，后端也是初学者，但是对硬件比较感兴趣，再加上项目是单页面的。所以内存地变化始终是比较在意的。功能上大概实现了之后便有了如下的 内存随使用时间变化图 (已初步优化)：

layUI 内存变化--Nodes 只增不减.jpg
初步优化是指在DOM 对象移除前用unbind()， 解除了部分事件绑定 ，否则Listener 和Nodes 都是直线型上升的。

1. 理想情况

但是真正理想的情况应该是如下图才对：

理想内存情况.jpg
内存随着使用时间在慢慢升高，但是在达到某一时刻或者是体积后会被GC 给回收掉，于是不论使用时间多久，页面的内存使用量始终会处于一种 动态平衡 的状态。

2. 测试JQuery

刚开始以为是layUI 的问题，因为自己拿JQuery 做测试，得到了下图的结果：

JQuery 加layModule 也是正常的.jpg
layModule 是我自己写的原生JS 模块，可以生成标准的layUI 样式控件。测试后发现也没有什么问题，那罪魁祸首不是layUI 还会是谁？ （其实layUI 内部也实现了一个JQuery 的）

3. 排查layUI

在layUI 官方论坛上去搜索 “内存泄漏” ，刚开始压根不知道内存泄漏这个词，发现相关问题很少，个位数，而且都不是想要的结果。

4. 令人纠结的Nodes

但是既然图中的Nodes 数量一直下不来，那么这个Nodes 究竟是怎么回事呢？Nodes、Node 节点嘛，节点当然想到了DOM，但是DOM 明明都已经移除了，为啥Nodes 还存在呢？
闭包、不可见的引用 都可能会导致内存泄漏，但是我的事件明明都已经解绑了，为什么还不行呢？至此，从发现问题已经过了两天了，包括一个周日( 单休 狗的周日更珍贵啊)

5. 柳暗花明

去github 上去找JQuery 的Issues 搜索“Memory Leak”，百度上搜“JQuery 内存泄漏”，偶然发现了一条线索，JQuery 也不知道一直持续到哪个版本的 特性，为了方面DOM 元素的 复用 ，在remove()/empty() 时，并不会将节点从内存中完全移除，于是就会产生一些 游离的DOM 对象 在内存中。看起来是病因，怎么解决呢？

6. 不求甚解

最后的解决方法是在 StackOverflow 里发现的，解决方法就是提问者的实现方法——给JQuery 添加了一个方法：

$.fn.removeWithoutLeaking = function() {
    this.each(function(i,e){
        if( e.parentNode )
            e.parentNode.removeChild(e);
    });
};

遗憾

对上面代码做了一丢丢改动，以便适合项目。目前心态很浮躁，所以并没有去仔细了解里面的内容，希望有兴趣的同学可以瞅一瞅吧。