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 free memory, it uses an automatic garbage collection mechanism. When an object is useless, that is, when no variable in the program refers to the object, the variable will be released from memory.
The code copy is as follows:
var s = [ 1, 2,3];
var s = null;
//In this way, the original array [1, 2, 3] will be released.
3. Recycle citation
Three objects A, B, C
AàBàC: A certain attribute of A refers to B, and C is also referenced by B's attribute. If A is cleared, then B and C are also released.
AàBàCàB: A certain attribute of C is added here to refer to 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.
The code copy 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, while {a:100} will be released.
4. Recycle references and closures
The code copy is as follows:
function outer(){
var obj = {};
function inner(){
//The obj object is referenced here
}
obj.inner = inner;
}
This is a kind of and hidden circular reference,. When outer is called once, two objects obj and inner are created inside it. Obj's inner property refers to inner; similar inner also refers to obj, because obj is still in the closed environment of innerFun. To be precise, this is due to the unique "scope chain" of JavaScript.
Therefore, closures are very easy to create circular references, and luckily JavaScript can handle such circular references very well.
5. Memory leak in IE
There are several memory leaks in IE, and there is a detailed explanation here (http://msdn.microsoft.com/en-us/library/bb250448.aspx).
Only one of these is discussed here, namely, memory leaks caused by circular references, because this is the most common situation.
When there is a loop 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 the loop 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 obj in the above example (point 4) references not a JavaScript Function object (inner), but an ActiveX object or Dom element, the circular reference formed in IE cannot be released.
The code copy 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's listening function, and the function also references the elem element through its scope chain. This way, even if you leave the current page in IE, these circular references will not be released.
6. Solution
The basic method is to manually clear this circular reference. The following is a very simple example. When using it, you can build an addEvent() function yourself and clear all event bindings on the unload event of the window.
The code copy 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 copy is as follows:
/**
* Iterate through a certain element node and all descendant elements
*
* @param Elem node The element node to be cleared
* @param function func function for processing
*
*/
function walkTheDOM(node, func) {
func(node);
node = node.firstChild;
while (node) {
walkTheDOM(node, func);
node = node.nextSibling;
}
}
/**
* Clear all references from the dom node to prevent memory leakage
*
* @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 who need it can refer to it.