慎用闭包谨防跨页面内存泄露

http://blog.thinkjs.net/archives/151

写Js的时候很多童鞋喜欢用闭包，其实闭包是非常危险的。我们先来看一个例子

"bb" > "aa" >cc
<code class="js string">"text/javascript"</code> <code class="js plain">></code> </div> <div class="line number3 index2 alt2"> <code class="js keyword">function</code> <code class="js plain"> leakTest(){ </code> </div> <div class="line number4 index3 alt1"> <code class="js spaces">    </code> <code class="js keyword">var</code> <code class="js plain">a=[];</code> <code class="js comments">//用来加大闭包资源占用 </code> </div> <div class="line number5 index4 alt2"> <code class="js spaces">    </code> <code class="js keyword">for</code> <code class="js plain">(</code> <code class="js keyword">var</code> <code class="js plain">i=0;i<100000;i++){ </code> </div> <div class="line number6 index5 alt1"> <code class="js spaces">     </code> <code class="js plain">a.push(</code> <code class="js string">'a'</code> <code class="js plain">);</code> </div> <div class="line number7 index6 alt2"> <code class="js spaces">    </code> <code class="js plain">}</code> </div> <div class="line number8 index7 alt1"> <code class="js spaces">    </code> <code class="js keyword">var</code> <code class="js plain">divA=document.getElementById(</code> <code class="js string">'aa'</code> <code class="js plain">);</code> </div> <div class="line number9 index8 alt2"> <code class="js spaces">    </code> <code class="js plain">divA.test=</code> <code class="js keyword">function</code> <code class="js plain">(){};</code> </div> <div class="line number10 index9 alt1"> <code class="js spaces">    </code> <code class="js plain">divA.parentNode.removeChild(divA);</code> </div> <div class="line number11 index10 alt2"> <code class="js plain">} </code> </div> <div class="line number12 index11 alt1"> <code class="js plain">leakTest(); </code> </div> <div class="line number13 index12 alt2"> <code class="js plain">

在IE下这个页面每次刷新都会产生跨页面泄露，内存占用每次增大了7MB！
在这个例子中我们在leakTest()中创建了一个内部匿名函数并在dom元素aa的自定义属性test中保存了他的引用，这就产生了一个闭包。
divA.parentNode.removeChild(divA); 
这句是产生泄露的主要原因，移除了aa只不过是在dom树上将这个节点移出了，在闭包中的divA这个局部变量不会被释放,而divA中保存着aa的引用，这就形成了一个循环引用，闭包保存了dom元素aa的引用，dom元素aa的自定义属性test又保存了闭包内部的匿名函数的引用，所以在页面刷新的时候IE无法释放掉这个aa和闭包的资源，在我这个例子中就比较吓人，刷一下涨几MB内存 

那么如何解决这个问题呢？其实很简单只要我们打断divA 与aa的连接就可以了

"bb" > "aa" >cc
<code class="js string">"text/javascript"</code> <code class="js plain">></code> </div> <div class="line number3 index2 alt2"> <code class="js keyword">function</code> <code class="js plain"> leakTest(){ </code> </div> <div class="line number4 index3 alt1"> <code class="js spaces">    </code> <code class="js keyword">var</code> <code class="js plain">a=[];</code> <code class="js comments">//用来加大闭包资源占用 </code> </div> <div class="line number5 index4 alt2"> <code class="js spaces">    </code> <code class="js keyword">for</code> <code class="js plain">(</code> <code class="js keyword">var</code> <code class="js plain">i=0;i<100000;i++){ </code> </div> <div class="line number6 index5 alt1"> <code class="js spaces">     </code> <code class="js plain">a.push(</code> <code class="js string">'a'</code> <code class="js plain">);</code> </div> <div class="line number7 index6 alt2"> <code class="js spaces">    </code> <code class="js plain">}</code> </div> <div class="line number8 index7 alt1"> <code class="js spaces">    </code> <code class="js keyword">var</code> <code class="js plain">divA=document.getElementById(</code> <code class="js string">'aa'</code> <code class="js plain">);</code> </div> <div class="line number9 index8 alt2"> <code class="js spaces">    </code> <code class="js plain">divA.test=</code> <code class="js keyword">function</code> <code class="js plain">(){};</code> </div> <div class="line number10 index9 alt1"> <code class="js spaces">    </code> <code class="js plain">divA.parentNode.removeChild(divA);</code> </div> <div class="line number11 index10 alt2"> <code class="js spaces">    </code> <code class="js plain">divA =</code> <code class="js keyword">null</code> <code class="js comments">// fix memory leak</code> </div> <div class="line number12 index11 alt1"> <code class="js plain">} </code> </div> <div class="line number13 index12 alt2"> <code class="js plain">leakTest(); </code> </div> <div class="line number14 index13 alt1"> <code class="js plain">

建议大家不要随意使用getElementById 这些原生的方法，最好使用jQuery object去操作dom 或存储dom，这样能减少因个人疏忽引起的内存泄漏。
毕竟内存泄漏对产品来说是非常严重的问题。