Javascript中的内存泄漏

2018-07-09 13:47:27来源：博客园阅读 ()

一、内存泄漏

由于某些原因不再需要的内存没有被操作系统或则空闲内存池回收。编程语言中有多种管理内存的方式。这些方式从不同程度上会减少内存泄漏的几率，高级语言嵌入了一个名为垃圾收集器的软件，其工作是跟踪内存分配和使用，以便找到不再需要分配内存的时间，在这种情况下，它将自动释放它。然而，该过程是近似的，因为知道是否需要某些存储器的一般问题是不可判定的（不能通过算法来解决）。

1. 循环引用导致的内存泄漏

当两个对象相互引用时，会形成一个循环引用，使每个对象的引用计数为1，在纯粹的垃圾收集系统中，循环引用不是问题：如果任何其他对象都不引用所涉及的对象，则两者都是会被视为垃圾而回收。但是，在引用计数系统中，两个对象都不能被销毁，因为引用计数永远不会减到零。在使用垃圾回收和引用计数的混合系统中，由于系统无法识别循环引用而导致泄漏。在这种情况下，DOM对象和Javascript对象都不会被破坏。

<html>
    <body>
        <script type = "text/javascript">
             document.write("Circular referances between Javascript and DOM!");
             var obj;
             window.onload = function() {
                 obj = document.getElementById("DivElement");
                 document.getElementById("DivElement").expandoProperty = obj;
                 Array(1000).join(new Array(2000).join("XXXXX"));
            }
        </script>
        <div id="DivElement">Div Element</div>
    </body>
</html>

如上面代码所示，Javascript对象obj引用了DivElement表示的DOM对象。DOM对象反过来又通过expandoProperty对Javascript对象有一个引用。Javascript对象和DOM对象之间存在循环引用。因为DOM对象通过引用计数进行管理，所以两个对象都不会被销毁。

2. 外部函数引起的循环引用

下面代码中，通过调用外部函数myFunction来创建循环引用。Javascript对象和DOM对象之间的循环引用将最终导致内存泄漏。

<html>
<head>
    <script type= "text/javascript">
        document.write("Circular references between Javascript and DOM!");
        function myFunction(element) {
            this.elementReferences = element;
            //this code forms a circular references here
            //by DOM-->JS-->DOM
            element.expandoProperty = this;
        }
        function Leak() {
            //this code will leak;
            new myFunction(document.getElementById("myDiv"));
        }
    </script>
</head>
<body onload= "Leak()">
    <div id="myDiv"></div>
</body>
</html>

正如上面这两类代码示例所显示的，循环很容易创建。他们还倾向于在Javascript中最方便的编程结构：闭包。

3. 闭包引起的内存泄漏

Javascript的优点之一是它允许函数嵌套在其他函数之中，嵌套内部函数可以继承外部函数的参数和变量，并且对该函数是私有的。Javascript开发人员使用内部函数将小效用函数集成到其他函数中，使得内部函数（childFunction）可以访问外部parentFunction的变量。当一个内部函数获取并使用对其外部函数变量的访问时，它称为闭包。

一个简单的闭包例子

<html>
<body>
    <script type = "text/javascript">
        document.write("Closure Demo!");
        window.onload = 
            function closureDemoParentFunction(paramA)
            {
                 var a = paramA;
                 return function closureDemoInnerFunction(paramB)
                 {
                      alert(a + " " + paramB);
                 };
            };
         var x=closureDemoParentFunction("outer x");
         x("inner x");
    </script>
</body>
</html>

在上面的代码中，closureDemoInnerFunction是父函数closureDemoParentFunction中定义的内部函数。当用外部x的参数对closureDemoParentFunction进行调用时，外部函数变量a被赋值外部x。函数返回一个指向内部函数closureDemoInnerFunction的指针，它包含在变量x中。必须注意的是，外部函数closureDemoParentFunction的局部变量a即使在外部函数返回后也会存在。这与C++等编程语言不同，在函数返回后，局部变量不再存在。在Javascript中，调用closureDemoParentFunction的时刻，创建一个具有属性a的作用域对象。此属性包含paramA的值，也称为"outer x"。同样，当closureDemoParentFunction 返回时，它将返回内部函数closureDemoInnerFunction，它包含在变量x中。

由于内部函数持有对外部函数的变量的引用，因此具有属性a的作用域对象不会被垃圾回收。当在x上用一个参数值（即x("inner x")进行调用时，将弹出一个显示"outer x inner x"的警报。闭包功能强大，因为它们允许内部函数在外部函数返回后保留对外部函数变量的访问权想。遗憾的是，闭包在Javascript对象和DOM对象之间隐藏循环引用非常出色。

由于IE9之前的版本对Javascript对象和COM对象使用不同的垃圾回收例程，因此闭包在这些版本中会导致一些特殊的问题。具体来说，如果闭包的作用域中保存着一个HTML元素，那么就意味着该元素将无法被销毁。

function assignHandler() {
    var element = document.getElementById("my_btn");
    element.onclick = function() {
         alert(element.id);
     };
}

以上代码创建了一个作为element元素事件处理程序的闭包，而这个闭包又创建了一个循环引用。由于匿名函数保存了一个对assignHandler()的活动对象的引用，因此就会导致无法减少element的引用数。只要匿名函数存在，element的引用数至少也是1，因此它占用的内存永远也会被回收。不过，这个问题是可以被解决的：

function assignHandler() {
    var element = document.getElementById("my_btn");
    var id = element.id;
    element.onclick = function() {
         alert(id);
     };
    element = null;
}

上面代码，是把element.id的一个副本保存在一个变量中，并且在闭包中引用该变量消除循环引用，但是，这种程度还不能解决内存泄露的问题。必须要记住：闭包会引用包含函数的整个活动对象，而这其中包含着element。即使闭包不直接引用element，包含函数的活动对象中也仍然会保存着一个引用。因此，必须要把element变量设置为null。这样就能解除对DOM对象的引用，顺利减少引用次数，确保回收其占用的内存。

4. 事件处理程序引起的内存泄漏

在下面的代码中，你将会发现，一个JavaScript对象（obj）包含对DOM对象（由id"元素"引用）的引用的闭包。DOM元素反过来又具有对Javascript obj的引用。在Javascript对象和DOM对象之间产生的循环引用会导致内存泄漏。

<html>
<body>
    <script type="text/javascript">
        document.write("Program to illustrate memory leak via closure");
        window.onload = function outerFunction() {
            var obj = document.getElementById("element");
            obj.onclick = function innerFunction() {
                 alert("Hi!,I will leak");
            };
            obj.bigString = new Array(1000).join(new Array(2000).join("XXXXX"));
        };
    </script>
    <button id="element">Click Me</button>
</body>
</html>

5. 避免内存泄漏

在Javascript中，内存泄露的另一方面是你可以避免它们。当您确定了可以导致循环引用的模式时，正如前面所列举的那样，您可以开始围绕它们进行工作。我们将使用上面三种的事件处理中内存泄漏的方式解决已知内存泄露的方法。一个简单的坚决方案是使Javascript对象obj设为null，从而显式中断循环引用。

<html>
<body>
    <script type="text/javascript">
        document.write("Avoiding memory leak via closure by breaking the circular reference");
        window.onload=function outerFunction(){
            var obj = document.getElementById("element");
            obj.onclick=function innerFunction() {
                alert("Hi! I have avoided the leak");
                // 一些逻辑代码
            };
        obj.bigString=new Array(1000).join(new Array(2000).join("XXXXX"));
        obj = null; //显示中断循环引用
        };
     </script>
     <button id="element">"Click Here"</button>
</body>
</html>

另一种方法是通过添加一个闭包，可以避免Javascript对象和DOM对象之间的循环引用。

<html>
<body>
    <script type="text/javascript">
        document.write("Avoiding memory leak via closure by adding another closure");
        window.onload=function outerFunction(){
            var anotherObj=function innerFunction() {
                alert("Hi! I have avoided the leak");
                // 一些逻辑代码
            };
            (function anotherInnerFunction() {
                var obj = document.getElementById("element");
                obj.onclick = anotherObj；
            })();
     </script>
     <button id="element">"Click Here"</button>
</body>
</html>

第三种方法可以通过添加里那个一个函数来避免闭包，从而防止泄露。

 <html>
 <head>
 <script type="text/javascript">
     document.write("Avoid leaks by avoiding closures!");
     window.onload=function()
     {
      var obj = document.getElementById("element");
      obj.onclick = doesNotLeak;
     }
     function doesNotLeak()
     {
          //Your Logic here
          alert("Hi! I have avoided the leak"); 
     }
 </script>
 </head>
 <body>
     <button id="element">"Click Here"</button>
 </body>
 </html>