이 코드로 인해 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는 8M/S의 속도로 메모리를 소모합니다 appendMapMarker1 cost.but 메모리에 appendMapmarker1과 동일, 그렇게 생각합니다. –

및 appendMapMarker2는 20K/s입니다. –

맞습니다. 방금 수정 된 appendMapMarker1 메서드를 몇 분 동안 실행합니다. 메모리 누출이 없습니다. appendMapMarker2가 새어 나지 않는 이유는 frame.divs 배열에 아무 요소도 추가되지 않기 때문에 예외가 있다는 것입니다. – styrr

이 코드로 인해 JavaScript에서 메모리 누수가 발생하는 이유는 무엇입니까?

답변

관련 문제