关于JS内存泄漏

总见到各种文章啦博客啦提到“内存泄漏”，那么到底什么是内存泄漏嘞？

我把自己看过的这些文章大致总结了一下。

 

一、什么是内存泄漏

我们在码代码的时候，经常会为一些变量啦、进程啦分配一部分内存。通常来说，一部分代码执行完成后，有些垃圾回收机制会自动将不用的内存回收以便复用。但在某些情况下，垃圾回收无法自动执行，这时有些内存得不到回收，就会一直被占用，这就是所谓的“内存泄漏”。

所以其危害，也是能想到的，资源耗尽后，系统会反应十分缓慢，因为无法有空闲内存创建新的进程，无法及时响应用户操作。

 

二、内存泄漏的几种情况及解决方法

1、 闭包

闭包在js中是个常用的东东。但因为其内部变量被调用后，外层函数所占内存也是无法被释放的，所以会产生内存泄漏。

我们可以将不再使用的对象手动解除占用，如：

functionbindEvent()
{
    var obj=document.createElement("XXX");
    obj.οnclick=function(){
        //Even if it's aempty function
    }
    obj=null;
}

2、 循环引用

之前笔试的时候做过一道题，是酱紫的：

var a= document.getElementById(“id1”)
var b= document.getElementById(“id2”)
a.x= b;
b.x= a; 

问会出现什么情况。这什么鬼哦~后来才知道这样的互相调用会出现内存泄漏，无止境的你掉用我我调用你的情况，直到浏览器关闭。所以最好还是避免这种情况。

 

3、 全局变量

这个一不小心就会出现的问题，很多人并不以为意。比如：

functionfoo() { a = "I love u"; }

a这个全局变量就会一直存在。所以还是尽量避免这种情况，使用var来声明局部变量。当然，可以使用严格模式来适当的规避这个问题。

 

4、 移除DOM节点但其绑定的事件木有移除

有两种方式：

第一种，我比较喜欢用，也很好理解。就是“事件委托”~通过事件的冒泡属性，相当于把事件绑定在其父元素上。具体方式详见“事件委托”相关教程~哈哈。

另一种，手动移除。先将事件（如oncilck等）设置为null，再移除对应的元素。

例纸：

<div id="Div">
    <input type="button" id="Btn">
</div>
<script type="text/javascript">
    var btn = document.getElementById("Btn");
    btn.onclick = function(){
        btn.onclick = null;
        document.getElementById("Div").revome(btn);
    }
</script>

5、 删除对象但其内部属性仍然存在

这时应该遍历对象的每一个属性，并且依次删除

而且要深度遍历，因为某个属性值也可能是对象~

 

6、 一些操作

如：appendChild和removeChild。

这个很奇怪：在appendChild时，应该又子到父由内向外append。

var parent =document.createElement("div"); 
var child =document.createElement("div"); 
parent.appendChild(child); 
document.body.appendChild(parent); 

不然 remove 是释放不了的。不造为啥 ~ 应该是一个规定。

 

 

先总结这么多吧。还有一些情况，遇到了再总结。综上。