A detailed discussion of JavaScript memory leaks_javascript skills

1. What is a closure and the scope chain involved in the closure will not be discussed here.

2. JavaScript garbage collection mechanism

JavaScript does not need to manually release memory, it uses an automatic garbage collection mechanism (garbage collection). When an object is useless, that is, when no variable in the program refers to the object, the variable will be released from memory.

Copy code The code is as follows:

var s = [1, 2,3];
var s = null;
//This way the original array [1,2,3] will be released.

3. Circular reference

Three objects A, B, C

AàBàC: A certain attribute of A refers to B, and C is also referenced by an attribute of B. If A is cleared, then B and C are also released.

AàBàCàB: Here a certain attribute of C is added to reference the B object. If this is to clear A, then B and C will not be released because a circular reference is generated between B and C.

Copy code The code is as follows:

var a = {};
a.pro = { a:100 };
a.pro.pro = { b:100 };
a = null ;
//In this case, {a:100} and {b:100} are also released at the same time.
                                                                      var obj = {};
Obj.pro = { a : 100 };
Obj.pro.pro = { b : 200 };
var two = obj.pro.pro;
Obj = null;
//In this case {b:200} will not be released, but {a:100} will be released.

4. Circular references and closures

Copy code The code is as follows:

function outer(){
var obj = {};
function inner(){
//The obj object is referenced here
}
         obj.inner = inner;
}

This is an extremely hidden circular reference. When outer is called once, two objects, obj and inner, will be created inside it. The inner property of obj refers to inner; similarly, inner also refers to obj. This is because obj is still in the closed environment of innerFun. To be precise, this It's due to JavaScript's unique "scope chain".

Therefore, closures are very easy to create circular references. Fortunately, JavaScript can handle such circular references very well.

5. Memory leak in IE

There are several types of memory leaks in IE, and there are detailed explanations here (

http://msdn.microsoft.com/en-us/library/bb250448.aspx).

Only one of them is discussed here, namely the memory leak caused by circular reference, because this is the most common situation.

When there is a circular reference between a DOM element or an ActiveX object and a normal JavaScript object, IE has special difficulties in releasing such variables. It is best to manually cut off the circular reference. This bug has been fixed in IE 7 (

http://www.quirksmode.org/blog/archives/2006/04/ie_7_and_javasc.html).

“IE 6 suffered from memory leaks when a circular reference between several objects, among which at least one DOM node, was created. This problem has been solved in IE 7. ”

If in the above example (point 4) obj refers not to a JavaScript Function object (inner), but to an ActiveX object or Dom element, the circular reference formed in IE cannot be released.

Copy code The code is as follows:

Function init(){
        var elem = document.getElementByid( 'id' );
          elem.onclick = function(){
alert('rain-man');
//The elem element
is referenced here         };
}

Elem refers to its click event listening function, which also refers back to the elem element through its scope chain. In this way, these circular references will not be released even if you leave the current page in IE.

6. Solution

The basic method is to manually clear this circular reference. Here is a very simple example. In actual application, you can build an addEvent() function yourself and clear all event bindings on the unload event of the window.

Copy code The code is as follows:

function outer(){
         var one = document.getElementById( 'one' );
         one.onclick = function(){};
}
​ window.onunload = function(){
         var one = document.getElementById( 'one' );
         one.onclick = null;
};

Other methods (by: Douglas Crockford)

Copy code The code is as follows:

/**
* Traverse an element node and all its descendant elements
*
* @param Elem node The element node to be cleared
* @param function func The function for processing
*
​*/
function walkTheDOM(node, func) {
func(node);
node = node.firstChild;
while (node) {
         walkTheDOM(node, func);
Node = node.nextSibling;
}
}
/**
* Clear all references to dom nodes to prevent memory leaks
*
* @param Elem node The element node to be cleared
*
​*/
function purgeEventHandlers(node) {
walkTheDOM(node, function (e) {
for (var n in e) {                                     If (typeof e[n] ===
                      'function') {
                  e[n] = null;
            }
}
});

The above is the relevant content and solutions for JavaScript memory leaks. Friends in need can refer to it