Memory leak caused by javascript removeChild_javascript tips

In order to verify, I wrote a page to verify the memory leak. The code is as follows:

Copy code The code is as follows:

Create element
[br]
< ;a href='javascript:removeDiv();'>Remove element
[br]
Test whether the DIV still exists

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Test for memory leaks</title> <div id="main"> </div> <a href="javascript:creatDiv();"> </a>Create element<br> <a href="javascript:removeDiv();"> </a>Delete element<br> <a href="javascript:checkDiv();"> </a>Test if the DIV still exists
[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh to execute

]

After clicking "Create Element" Then click "Delete Element" to delete the newly created element using removeChild, and then click "Test whether the DIV still exists" to check whether the element is really deleted. The result alert displays

null. It seems that the element node has really been deleted. So what is the memory leak mentioned in Situ Zhengmei's article? I had to search on google to see if anyone has also encountered the problem of memory leak caused by removeChild. Finally, I found someone asking the same question (LINK) on an English version of msdn. I slightly modified the code in it to see through comparison the memory leak caused by removeChild.
The code is as follows:

Copy the code The code is as follows:

产生内存泄漏方式


不产生内存泄漏方式


<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