javascript RemoveChild_javascript 팁으로 인한 메모리 누수

확인을 위해 메모리 누수를 확인하는 페이지를 작성했습니다. 코드는 다음과 같습니다.

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

>

요소 만들기 🎜>< ;a href='javascript:removeDiv();'>요소 제거
[br]
DIV가 여전히 존재합니다.

메모리 누수 테스트 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> </title>요소 생성 <div id="main">요소 삭제</div> <a href="javascript:creatDiv();"> </a>DIV가 아직 존재하는지 테스트<br> <a href="javascript:removeDiv();"> </a> <br><a href="javascript:checkDiv();"></a> [Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.
] 이후 "요소 만들기"를 클릭한 다음 "요소 삭제"를 클릭하여 새로 생성된 요소를 제거Child를 사용하여 삭제한 다음 "DIV가 여전히 존재하는지 테스트"를 클릭하여 요소가 실제로 삭제되었는지 확인하세요. 결과 경고가 표시됩니다. 널. 실제로 요소 노드가 삭제된 것 같습니다. 그렇다면 Situ Zhengmei의 기사에서 언급된 메모리 누수란 무엇입니까? 누군가가 RemoveChild로 인한 메모리 누수 문제를 겪었는지 확인하기 위해 Google에서 검색해야 했습니다. 마지막으로, msdn의 영어 버전에서 동일한 질문(링크)을 요청하는 사람을 발견했습니다. RemoveChild로 인한 메모리 누수를 비교하기 위해 코드를 약간 수정했습니다. 코드는 다음과 같습니다.

코드를 복사하세요

코드는 다음과 같습니다.

产生内存泄漏方式


不产生内存泄漏方式


<script> <br>var dialog; <br>function add() <br>{ <br>dialog = document.createElement('div'); <br>var html = '<div><p>Title</p></div>'; <br>dialog.innerHTML = html; <br>document.body.appendChild(dialog); <br>dialog.style.marginTop='200px'; <br>dialog.style.marginLeft='200px'; <br>} <br>function remove() <br>{ <br>document.body.removeChild(dialog); <br>dialog=null; <br>} <br>function leak() <br>{ <br>for(var i=0;i<100000;i++){ <br>add(); <br>remove(); <br>} <br>alert('leak done'); <br>} <br>function notLeak() <br>{ <br>for(var i=0;i<100000;i++){ <br>add(); <br>discardElement(dialog); <br>} <br>alert('notLeak done'); <br>} <br>function discardElement(element) { <br>var garbageBin = document.getElementById('IELeakGarbageBin'); <br>if (!garbageBin) { <br>garbageBin = document.createElement('DIV'); <br>garbageBin.id = 'IELeakGarbageBin'; <br>garbageBin.style.display = 'none'; <br>document.body.appendChild(garbageBin); <br>} <br>// move the element to the garbage bin <br>garbageBin.appendChild(element); <br>garbageBin.innerHTML = ''; <br>} <br></script>

<title>测试 removeChild 导致的内存泄漏</title> <a href="javascript:leak();">产生内存泄漏方式</a> <a href="javascript:notLeak();">不产生内存泄漏方式</a> <script> var dialog; function add() { dialog = document.createElement('div'); var html = '<div><p>Title</script>

'; dialog.innerHTML = html; document.body.appendChild(dialog); dialog.style.marginTop='200px'; dialog.style.marginLeft='200px'; } function remove() { document.body.removeChild(dialog); dialog=null; } function leak() { for(var i=0;i
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

首先运行“产生内存泄漏方式”
未运行前打开任务管理器监控内存大小如下：

运行完再查看内存大小，可以看到内存大小已经增加了很多。

接着我再运行“不产生内存泄漏方式”
未运行前打开任务管理器监控内存大小如下：

运行完再查看内存大小，可以看到内存较“产生内存泄漏方式”小了很多。

PS: 为了检验 removeChild 导致的内存泄漏 ，我 google 了很多 IE 内存泄漏的相关文章。
相关文章如下：
http://www.cnblogs.com/dwjaissk/archive/2007/07/20/824884.html
http://bugs.dojotoolkit.org/ticket/1727
http://article.yeeyan.org/view/3407/10103