2012-06-23 6 views
3

다음 자바 스크립트 코드는 메모리 누수가있는 것 같지만 이유는 확실하지 않습니다. 내가 크롬 19, 파이어 폭스 (12)이 시도했습니다 코드는 다음과 같습니다 : 당신이 계속 클릭하면자바 스크립트 removeChild 메모리 누출?

<body> 
    <input id="add" type="button" value="add" onclick="add()" /> 
    <input id="remove" type="button" value="remove" onclick="remove()" /> 
    <div id="content"> 
    </div> 
</body> 

<script> 
    var count = 0; 

    function add() { 
     var i = 0, 
      newdiv; 

     for (i = 0; i < 10000; i++) { 
      newdiv = document.createElement('div'); 
      document.getElementById("content").appendChild(newdiv); 
      newdiv.setAttribute('id', "div" + count); 
      newdiv.innerHTML = "section " + count; 
      newdiv = null; 

      count = count + 1; 
     } 
    } 

    function remove() { 
     var i = 0; 
     for (i = 0; i < count; i++) { 
      document.getElementById("content").removeChild(document.getElementById("div" + i)); 
     } 
     count = 0; 
    } 

</script> 

버튼을 추가 한 다음 Windows 작업 관리자의 메모리가 계속 증가 버튼을 제거 . 가비지 수집이 시작될 때 어느 시점에서 메모리가 감소 할 것으로 예상 했었지만 결코 발생하지 않는 것으로 보입니다.

내 질문은 : 이 코드에서 메모리 누수가 있습니까? 그리고 만약 그렇다면 내가 누설을 수정하는 코드를 리팩토링 할 수 있습니까?

+0

Chromium 19/Ubuntu 11.04에서 메모리 문제없이 수행하는 것 같습니다. –

+0

'newdiv = null;'은'delete newdiv;'와 같지 않기 때문에'undefined'가 아닌'null'을 일부 설정하는 것보다 삭제하는 것이 낫다고 생각할 수도 있습니다 ... 문서의 로컬 저장된 참조 및 폐쇄에 모든 것을 실행하고 글로벌 창에 물건을 만들지 obhect 심지어이 일을 속도를 줄이고 메모리 사용량을 줄이기 imho –

답변

2

나는 이것을 Chrome 19.0에서 테스트했지만 네가 맞다면 메모리가 증가합니다. 그러나 약 30 초 후 가비지 콜렉션이 시작되고 정상으로 돌아옵니다.

0

정말 메모리 누수가 증명 ...하지만 당신이 좋은 스포츠 경기 후 10000 병을 정리할 상상할 수없는, 어떤 시간과 자원이 소요) 일부 mabye 도움이 의견 외에

를 : closure를 사용하여 window 객체의 코드를 캡슐화하십시오. 문서에 대한 로컬 참조를 사용하여 범위 체인 연습을 피하십시오. 미국은 모든 새 div를 추가하고 매번 문서에 액세스하지 않고 함수 오버 헤드를 피하기위한 단편을 만듭니다 (이 모든 것은 단지 제안 일뿐 아니라 찾고있는 것이 아니라 좋은 것임). 이러한 예는 모두 완전히 크로스 브라우저를 작동하지 않을 수 있습니다

<body> 
    <input id="add" type="button" value="add"> 
    <input id="remove" type="button" value="remove"> 
    <div id="content"></div> 
</body> 
<script> 
    (function(DOC) { 
    var count = 0, getById = DOC.getElementById, createFragment = DOC.createDocumentFragment; 

    getById("add").addEventListener("click", function() { 
     var i = 0, 
      newdiv, 
      fragment = createFragment(); 

     for (; i < 10000; i++) { 
     newdiv = document.createElement('div'); 
     newdiv.id = "div" + count; 
     newdiv.innerHTML = "section " + count; 

     fragment.appendChild(newdiv); 
     delete newdiv; 
     } 
     getById("content").appendChild(fragment); 
     count = i; 
    }, false); 

    getById("remove").addEventListener("click", function() { 
     var element, i = 0; 
     for (; i < count; i++) { 
     element = getById("div" + i); 
     element.parentNode.removeChild(element); 
     } 
     count = 0; 
    }, false); 

    })(document); 
</script> 

난이 해결하거나 적어도 누출을 감소 하나에 도움이되기를 바랍니다 : 적어도 문제를 조금 :

주를 줄여야합니다. =)