浅析造成 JS 内存泄露的几种原因及解决方案

内存泄露是指一块被分配的内存既不能使用，又不能回收，直到浏览器进程结束。在C++中，因为是手动管理内存，内存泄露是经常出现的事情。而现在流行的C#和Java等语言采用了自动垃圾回收方法管理内存，正常使用的情况下几乎不会发生内存泄露。浏览器中也是采用自动垃圾回收方法管理内存，但由于浏览器垃圾回收方法有bug，会产生内存泄露。

 

• 当页面中元素被移除或替换时，若元素绑定的事件仍没被移除，在IE中不会作出恰当处理，此时要先手工移除事件，不然会存在内存泄露。
  • <div id="myDiv">
        <input type="button" value="Click me" id="myBtn">
    </div>
    <script type="text/javascript">
        var btn = document.getElementById("myBtn");
        btn.onclick = function(){
            document.getElementById("myDiv").innerHTML = "Processing...";
        }
    </script>
  • <div id="myDiv">
        <input type="button" value="Click me" id="myBtn">
    </div>
    <script type="text/javascript">
        var btn = document.getElementById("myBtn");
        btn.onclick = function(){
            document.getElementById("myDiv").innerHTML = "Processing...";
            btn.onclick = null;
        }
    </script>
  • <div id="myDiv">
        <input type="button" value="Click me" id="myBtn">
    </div>
    <script type="text/javascript">
        document.onclick = function(event){
            event = event || window.event;
            if(event.target.id == "myBtn"){
                document.getElementById("myDiv").innerHTML = "Processing...";
            }
        }
    </script>
• 对于纯粹的 ECMAScript 对象而言，只要没有其他对象引用对象 a、b，也就是说它们只是相互之间的引用，那么仍然会被垃圾收集系统识别并处理。但是，在 Internet Explorer 中，如果循环引用中的任何对象是 DOM 节点或者 ActiveX 对象，垃圾收集系统则不会发现它们之间的循环关系与系统中的其他对象是隔离的并释放它们。最终它们将被保留在内存中，直到浏览器关闭。
  • var a=document.getElementById("xx");
    var b=document.getElementById("xxx");
    a.r=b;
    b.r=a;
  • var a=document.getElementById("xx");
    a.r=a;
• 闭包可以维持函数内局部变量，使其得不到释放。
  上例定义事件回调时，由于是函数内定义函数，并且内部函数--事件回调的引用外暴了，形成了闭包
  • function bindEvent() 
    { 
        var obj=document.createElement("XXX"); 
        obj.onclick=function(){ 
            //Even if it's a empty function 
        } 
    }
     
  • 解决之道，将事件处理函数定义在外部，解除闭包
    • function bindEvent() 
      { 
          var obj=document.createElement("XXX"); 
          obj.onclick=onclickHandler; 
      } 
      function onclickHandler(){ 
          //do something 
      }
  • 或者在定义事件处理函数的外部函数中，删除对dom的引用（题外，《JavaScript权威指南》中介绍过，闭包中，作用域中没用的属性可以删除，以减少内存消耗。）
    • function bindEvent() 
      { 
          var obj=document.createElement("XXX"); 
          obj.onclick=function(){ 
              //Even if it's a empty function 
          } 
          obj=null; 
      }
• a = {p: {x: 1}};
  b = a.p;
  delete a.p;
   执行这段代码之后b.x的值依然是1.由于已经删除的属性引用依然存在，因此在JavaScript的某些实现中，可能因为这种不严谨的代码而造成内存泄露。所以在销毁对象的时候，要遍历属性中属性，依次删除。