为什么此代码在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中导致内存泄漏？

回答

相关问题