Common Java Script memory leak causes and solutions

Foreword

It refers to a memory leak due to negligence or error of the program fails to free up memory no longer in use. Memory leak does not refer to the physical memory in the disappearance, but the application after a certain period of memory allocation, due to design errors, resulting in the period prior to the release of the memory loses control of the memory segment, resulting in a waste of memory. Some here say will bring common cause of memory leaks.

0.5 Global Variables

JavaScript freedom of one of the ways that it can not handle variable declarations: undeclared variables in a reference to create a new variable in the global object. In the browser environment, the global object is window.

. 1  function foo () {
 2    name = ' distal said ' ;
 3  }
 4  // actually the name variable mount the window object 
. 5  function foo () {
 . 6    the window.name = ' distal said ' ;
 7  }
 . 8  
. 9  // or 
10  function foo () {
 . 11    this .name = ' distal said ' ;
 12 is  }
 13 is foo () // in fact, this is the point where the window object

Such an unexpected inadvertently global variable is created, in order to prevent such an error occurs, the front add your Javascript files 'use strict;' . This opens up more stringent mode prevents accidental global parsing of JavaScript. Or pay attention to their well-defined variables!

1. circular reference

In js memory management environment, if you have access to the object A object B, called Object A reference to the object B. Reference counting strategy is the "object is no longer needed," reduced to "object has no other object reference to it" if no object reference to the object, then the object will be recovered.

. 1  function FUNC () {  
 2      the let OBJ1 = {};  
 . 3      the let obj2 = {};  
 . 4    
. 5      obj1.a = obj2; // OBJ1 reference obj2   
. 6      obj2.a = OBJ1; // obj2 reference OBJ1   
. 7 }

After the end of the function func executed, the return value is undefined, functions, and so the whole internal variables should be recovered, but the method according to the reference count, and the number of references OBJ1 obj2 is not 0, so they will not be recovered. To solve the problem of circular references, it is best not to use them when they are manually set to null.

Solution: obj1 and obj2 are set null .

2. Closure

Closures: anonymous functions can access the variable parent scope.

1 var names = (function(){  
2     var name = 'js-say';
3     return function(){
4         console.log(name);
5     }
6 })()

Closure will result in the life cycle of an object reference from the context of the current function, if the closure if used improperly, can lead to circular references (circular reference), similar to the deadlock can only be avoided, can not occur after resolved, even if garbage collection is also still a memory leak.

3. Forgotten delay / Timer

In our daily needs, it may often try to setInterval/setTimeout , but usually forget to clean up after use.

1  var someResource = getData (); 
 2  setInterval (function () { 
 3      var node = document.getElementById ( ' Node ' ); 
 4      an if (node) { 
 5          // PROCESSING node sum someResource 
6          Node.InnerHTML = JSON.stringify ( someResource)); 
 7      } 
 8 }, 1000 );

setInterval/setTimeout The this point is that the window object, so the definition of internal variables also mounted to the global; if cited in the someResource variable, if not cleared setInterval/setTimeout , then someResource also not released; empathy is actually setTimeoutthe same. So we need to remember to run out clearInterval/clearTimeout.

4. DOM caused memory leaks

No clear reference to DOM

. 1  var refA = document.getElementById ( ' refA ' );
 2  document.body.removeChild (refA);
 . 3  // #refA can not be recovered, because of the variable refA reference to it. It will release its reference to #refA, but still can not be recycled #refA.

Solution:refA = null .

DOM object properties is to add a reference to an object

var MyObject = {}; 
document.getElementById('myDiv').myProp = MyObject;

Solution: page onunload release event document.getElementById('myDiv').myProp = null; .

DOM is deleted or emptied no clear binding events this situation should be relatively common, but also should be relatively easily overlooked.

DOM object to bind events

1 var btn = document.getElementById("myBtn"); 
2 btn.onclick = function(){ 
3     document.getElementById("myDiv").innerHTML = "wechat: js-say"; 
4 }
5 
6 document.body.removeChild(btn);
7 btn = null;

Here the DOM removed, but still have not removed the binding events can cause a memory leak so it is necessary to clear the event.

1 var btn = document.getElementById("myBtn"); 
2 btn.onclick = function(){ 
3   btn.onclick = null;
4     document.getElementById("myDiv").innerHTML = "wechat: js-say"; 
5 }
6 
7 document.body.removeChild(btn);
8 btn = null;