JS memory leaks in several cases

To resolve a memory leak, you must know what a memory leak is and what happens when a memory leak occurs, and you can exclude it when you encounter a problem. Only those inadvertent memory leaks are discussed here.

First, what is a memory leak

A memory leak refers to a piece of allocated memory that cannot be used or recycled until the browser process ends. In C + +, memory leaks are a frequent occurrence because of the manual management of memory. And now popular C # and Java and other languages use automatic garbage collection method to manage memory, in the case of normal use, there will be little memory leaks. The browser also uses the automatic garbage collection method to manage memory, but due to a bug in the browser garbage collection method, a memory leak occurs.

Two, memory leakage of several cases

1, when the page element is removed or replaced, if the element binding event is still not removed, in IE will not be properly handled, the first time to manually remove the event, otherwise there will be a memory leak.

1 <div id= "mydiv" >2     <input type= "button" value= "click Me" id= "mybtn" >3 </div>4 <script type= "Text/javascript" >5     var btn = document.getElementById ("mybtn"); 6     function () {7         document.getElementById ("mydiv"). InnerHTML = "processing ..."; 8     }9 </script>

Should be changed to the following

1<div id= "Mydiv" >2<input type= "button" value= "click Me" id= "mybtn" >3</div>4<script type= "Text/javascript" >5     varBTN = document.getElementById ("mybtn");6Btn.onclick =function(){7Btn.onclick =NULL;8document.getElementById ("Mydiv"). InnerHTML = "Processing ...";9     }Ten</script>

or using event delegates

1<div id= "Mydiv" >2<input type= "button" value= "click Me" id= "mybtn" >3</div>4<script type= "Text/javascript" >5Document.onclick =function(event) {6Event = Event | |window.event;7         if(Event.target.id = = "Mybtn"){8document.getElementById ("Mydiv"). InnerHTML = "Processing ...";9         }Ten     } One</script>

2.

1 var a=document.getelementbyid ("xx"); 2 var b=document.getelementbyid ("xxx"); 3 a.r=b; 4 b.r=a;

1 var a=document.getelementbyid ("xx"); 2 a.r=a;

For purely ECMAScript objects, as long as there are no other objects referencing objects A, B, which means they are only references to each other, they are still recognized and processed by the garbage collection system. However, in Internet Explorer, if any object in a circular reference is a DOM node or an ActiveX object, the garbage collection system does not find that the cyclic relationship between them is isolated from other objects in the system and frees them. Eventually they will be kept in memory until the browser is closed.

3.

1 function  23     var obj=document.createelement ("XXX"4     obj.onclick=function 5         //  67    }

Closures can maintain local variables within a function so that they are not released.

The above example defines an event callback, because it is defined within the function, and the internal function----------the reference to the event callback forms a closure solution, the event handler is defined externally, and the closure is unblocked.

 1  function   Bindevent ()  2  3  var  obj=document.createelement ("XXX" ) ;  4  obj.onclick=onclickhandler;  5   6  function   OnClickHandler () { Span style= "color: #008080;" >7  do something  8 } 

  javascript authoritative guide," in closures, the unused properties in the scope can be removed to reduce memory consumption. )

1 function  23     var obj=document.createelement ("XXX"4     obj.onclick=function 5         //  67         obj=null8 }

4.

1 a = {p: {x:1}}; 2 b = a.p; 3 Delete a.p;

After executing this code, the value of b.x is still 1. Because the deleted attribute reference still exists, in some implementations of JavaScript, there may be a memory leak due to this non-rigorous code. So when destroying an object, iterate through the properties in the property, and then delete it.

5. Automatic type boxing Conversion

Look at the online information, said the following code in the IE series will lead to memory leaks, first mention a god, the specific leakage or not first regardless

1 var s="Lalala"; 2 alert (s.length);

s itself is a string instead of an object, it has no length property, so when the length is accessed, the JS engine automatically creates a temporary string object that encapsulates s, and this object is bound to leak. The bug is pretty easy to solve, and remember that all value types do. Explicitly convert before operation:

1 var s= "Lalala"; 2 alert (new String (s). length);

6. Some DOM operations

The unique problem with the IE series is simply that, in the appendchild;ie7 of DOM elements that are not on the DOM tree, it seems that in order to improve memory leaks, IE7 uses an extreme solution: to reclaim all the elements of the DOM tree while leaving the page.

This article starts: http://www.cnblogs.com/sprying/archive/2013/05/31/3109517.html

The above knowledge is derived from JavaScript advanced programming and the JavaScript authoritative guide and http://www.cn-cuckoo.com/2007/08/01/. Understand-javascript-closures-72.html#clsto

Http://www.uml.org.cn/site/201205294.asp

JavaScript advanced programming about memory part http://bbs.phpchina.com/thread-221214-1-1.html

Http://www.feeldesignstudio.com/2013/09/javascript-memory-management to be included

JS memory leaks in several cases