js 메모리 누수_자바스크립트 기술의 좋은 예

다른 사람의 예를 바꿔보니 이렇게 콤팩트해진 것 같아요! 다른 사람들의 말을 바꿔 말하면, DOM 객체에 Js 객체(예: 이벤트 핸들러)에 대한 참조가 포함되어 있고 이 Js 객체가 DOM 객체에 대한 참조를 보유하고 있는 경우 순환 참조로 충분하므로 메모리 누수가 발생했습니다. . "코드 실행"을 클릭하고 작업 관리자를 열어 메모리 변경 사항을 확인하세요. ie8과 ff에서 각각 테스트한 결과 차이점은 말할 필요도 없습니다.

코드 실행

코드 복사 코드는 다음과 같습니다.

< H.tml & gt;
& lt; 제목 & gt;
& gt; ;
본문 {
패딩: 10px;
} & lt ;/style>

<script><br> var q = [];<br> var n = 0 ;<br> setInterval(function(){<br> q.push(makeSpan());<br> if (q.length>=10){<br> var s = q.shift();<br> if(s){<br> s.parentNode.removeChild(s);<br> }<br> }<br> n ;<br> },10);<br><br> function makeSpan(){<br> var s = document.createElement("span");<br> document.body.appendChild(s); <br> var t=document.createTextNode("*** " n " ***");<br> s.appendChild(t);<br> s.onclick=function(e){<br> s. style.BackgroundColor="red";<br> 경고(n);<br> } ;<br> return s;<br> };<br> </script>

그럼 IE에서는 어떻게 해결하나요?
노드를 삭제할 때 수동으로 순환 참조를 끊고 다음과 같이 setInterval 코드를 약간 변경합니다.

코드 복사 코드는 다음과 같습니다:setInterval(function(){

q.push(makeSpan());

if(q.length>=10){
var s = q.shift();
if(s){
s.onclick = null;//핵심은 여기에 있습니다
s.parentNode.removeChild(s);
}
}
n ;
},10);