JavaScript Memory leakage-javascript tips-js tutorial

Starting from what is a closure and the scope chain involved in the closure, this article describes the JavaScript garbage collection mechanism, circular reference, circular reference and closure, memory leakage in IE, and solutions, this is a very detailed and good article. We recommend it to you here. 1. What is a closure and the scope chain involved in the closure.

2. JavaScript garbage collection mechanism

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

The Code is as follows:

Var s = [1, 2, 3];
Var s = null;
// The original array [1, 2, 3] will be released.

3. circular reference

Three objects A, B, and C

A certain attribute of A references B, and C is also referenced by B. If A is cleared, B and C are also released.

A. B. C. B: a property of c is added to reference the B object. If this is to clear A, B and C will not be released, because circular references are generated between B and C.

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.

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

The Code is as follows:

Function outer (){
Var obj = {};
Function inner (){
// The object obj is referenced here.
}
Obj. inner = inner;
}

This is a circular reference and its concealment ,. When an outer is called, two objects, obj and inner, will be created inside it. The inner attribute of obj references inner, and the inner also references obj, this is because obj is still in innerFun's closed environment. To be precise, this is because JavaScript has a unique "Scope chain ".
Therefore, closures are very easy to create circular references. Fortunately, JavaScript can handle such circular references well.

5. Memory leakage in IE

There are several memory leaks in IE, here are detailed explanations (http://msdn.microsoft.com/en-us/library/bb250448.aspx ).

Here we only discuss one of them, that is, memory leakage caused by loop reference, because this is the most common situation.

When there is a circular reference between a DOM element or ActiveX object and a common 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 (http://www.quirksmode.org/blog/archives/2006/04/ie_7_and_javasc.html) in IE 7 ).

"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 obj in the above example () references not a JavaScript Function object (inner), but an ActiveX object or Dom element, in this way, the circular references formed in IE cannot be released.

The Code is as follows:

Function init (){
Var elem = document. getElementByid ('id ');
Elem. onclick = function (){
Alert ('rain-man ');
// Here the elem element is referenced
};
}

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

6. Solution

The basic method is to manually clear this loop reference. The following is a very simple example. You can build an addEvent () function on your own in actual applications, in addition, all event bindings are cleared on the window unload event.

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)

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 to be processed.
*
*/
Function compute thedom (node, func ){
Func (node );
Node = node. firstChild;
While (node ){
Define thedom (node, func );
Node = node. nextSibling;
}
}
/**
* Clear all references of the dom node to prevent memory leakage.
*
* @ Param Elem node the element node to be cleared
*
*/
Function purgeEventHandlers (node ){
Define thedom (node, function (e ){
For (var n in e ){
If (typeof e [n] =
'Function '){
E [n] = null;
}
}
});

The above is the content and solution of JavaScript Memory leakage. If you need it, refer