To verify, I wrote a page to validate how memory leaks. The code is as follows
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Test Memory leaks </title>
<script type= "Text/javascript" >
function Creatdiv ()
{
var divobj = document.createelement ("div");
Divobj.id= "Testdiv";
divobj.innerhtml = "div to test";
document.getElementById ("main"). AppendChild (Divobj);
}
function Removediv ()
{
document.getElementById ("main"). RemoveChild (document.getElementById ("Testdiv"));
}
function Checkdiv ()
{
Alert (document.getElementById ("Testdiv"));
}
</script>
<body>
<div id= "Main" >
</div>
<a href= ' Javascript:creatdiv (); ' > Create Elements </a>
[BR]
<a href= ' Javascript:removediv (); ' > Delete Elements </a>
[BR]
<a href= ' Javascript:checkdiv (); ' > Test div is still there </a>
</body>
<textarea id="runcode45646"><! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <title> test memory leaks </title> <script type=" Text/javascript "> Function Creatdiv () {VA R divobj = document.createelement ("div"); Divobj.id= "Testdiv"; divobj.innerhtml = "div to test"; document.getElementById ("main"). AppendChild (Divobj); function Removediv () {document.getElementById ("main"). RemoveChild (document.getElementById ("Testdiv")); function Checkdiv () {Alert (document.getElementById ("Testdiv")); } </script></pead> <body> <div id= "main" > </div> create element <br> Delete element <br> test Whether Div still exists </body> </ptml></textarea>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Click "Create Element" and then click "Delete Element" to delete the newly created element with RemoveChild, then click "Test div is still exist" to see if the element is really deleted, the result alert shows
Null. It seems that the element node has really been deleted. What about the memory leaks that Shizhong in the American language? Had to go to Google search to see if anyone also encountered RemoveChild caused within
A problem with a leak. Finally in an English version of MSDN found that someone is asking the same question (LINK), I will be the code inside it slightly modified to look at the removechild caused by the memory leak.
The code is as follows:
Copy Code code as follows:
<title> test removechild caused by memory leaks </title>
<body>
<a href= "Javascript:leak ();" > Generate memory Leak mode </a>
<br/>
<a href= "Javascript:notleak ();" > does not generate memory leak mode </a>
</body>
<script>
var dialog;
function Add ()
{
Dialog = document.createelement (' div ');
var html = ' <div><p>Title</p></div> ';
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<100000;i++) {
Add ();
Remove ();
}
Alert (' leak done ');
}
function Notleak ()
{
for (Var i=0;i<100000;i++) {
Add ();
Discardelement (Dialog);
}
Alert (' Notleak done ');
}
function Discardelement (Element) {
var garbagebin = document.getElementById (' Ieleakgarbagebin ');
if (!garbagebin) {
Garbagebin = document.createelement (' DIV ');
garbagebin.id = ' Ieleakgarbagebin ';
GarbageBin.style.display = ' None ';
Document.body.appendChild (Garbagebin);
}
Move the element to the garbage bin
Garbagebin.appendchild (Element);
garbagebin.innerhtml = ';
}
</script>
<ptml> <pead> <title> Test removechild caused memory leak </title> </pead> <body> generate memory leak mode Does not generate memory leak mode </body> </ptml> <script> var Dialog; function Add () {dialog = document.createelement (' div '); var html = ' <div><p>Title</p></div> '; 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<100000;i++) {Add (); Remove (); Alert (' leak done '); function Notleak () {for (Var i=0;i<100000;i++) {Add (); Discardelement (Dialog); Alert (' Notleak done '); function Discardelement (Element) {var garbagebin = document.getElementById (' Ieleakgarbagebin '); if (!garbagebin) {garbagebin = document.createelement (' DIV '); garbagebin.id = ' Ieleakgarbagebin '; GarbageBin.style.display = ' None '; Document.body.appendChild (Garbagebin); }//Move the element to the garbage bin Garbagebin.appendchild (element); garbagebin.innerhtml = '; } </script>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Run the "Generate Memory leak mode" first
Open Task Manager before running monitor memory size as follows:
When you are finished running and looking at the memory size, you can see that the memory size has increased a lot.
Then I run the "Do not generate memory leak mode"
Open Task Manager before running monitor memory size as follows:
After running and looking at the memory size, you can see that memory is much smaller than the "Generate memory leak mode".
PS: In order to verify the memory leak caused by removechild, I Google a lot of IE memory leaks related articles.
Related articles are as follows:
Http://www.cnblogs.com/dwjaissk/archive/2007/07/20/824884.html
http://bugs.dojotoolkit.org/ticket/1727
http://article.yeeyan.org/view/3407/10103
