Memory leak _javascript techniques caused by JavaScript removechild

Source: Internet
Author: User
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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.