爲什麼此代碼在JavaScript中導致內存泄漏？

<!doctype html> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
    <script> 
    function Frame(){ 
     this.divs=[]; 
     this.extra = new Array(2000); 
    } 

    Frame.prototype.reloadMapMarker = function(){ 
     //appendMapMarker2(); 
     appendMapMarker1(); 
    }; 

    function divClick(){ 

    } 

    //a big surprise!!! 
    function appendMapMarker1(){ 
     var div = document.getElementById('test'); 
     $(div).empty(); 
     var frag=document.createDocumentFragment(); 
     for(var i=0; i<100; i++){ 
      var newDiv=document.createElement('div'); 
      newDiv.onclick = divClick; 
      newDiv.innerHTML = String(i); 
      frag.appendChild(newDiv); 
      frame.divs.push(newDiv); 
     } 
     div.appendChild(frag); 
    } 

    //less memory leak 
    function appendMapMarker2(){ 
     var div = document.getElementById('test'); 
     var str = []; 
     for(var i=0; i<100; i++){ 
      str.push('<div onclick="divClick()" style="margin:2px;border:1px solid #eee;">',i,'</div>'); 
      frame.divs.push(div.children[div.children.length-1]); 
     } 
     div.innerHTML = str.join(''); 
    } 

    var frame =new Frame(); 
    window.onload=function(){ 
     setInterval(frame.reloadMapMarker,100); 
    }; 
    </script> 
</head> 
<body> 
    <div id="test"></div> 
</body>

兩個appendMapMarker1和appendMapMarker2就會造成內存泄漏，但appendMapMarker2比appendMapMarker1好得多。

你能告訴我爲什麼這段代碼會導致內存泄漏，爲什麼appendMapMarker2比appendMapMarker1更好？

來源

2011-10-13 simon xu

你的內存泄漏非常明顯。您在frame.divs陣列中放置了「無限」數量的元素。因此，每次調用appendMapMaker *函數時都需要重置frame.divs數組。基本上是這樣的：

function appendMapMarker*() { 
    frame.divs = []; 
    // .... 
}

來源

2011-10-13 13:28:44 styrr

我不這麼認爲，如果你是對的，appendMapMarker2相同appendMapmarker1內存cost.but appendMapMarker1將在8米/秒的速度消耗內存。 –

和appendMapMarker2是20K/s –

我是對的。我只需運行修改後的appendMapMarker1方法即可：無內存泄漏。 appendMapMarker2沒有泄漏的原因是你有一個異常，這導致沒有元素被添加到frame.divs數組中。 – styrr

爲什麼此代碼在JavaScript中導致內存泄漏？

回答

相關問題