Easy to create a few aspects of JavaScript memory leaks

Efficient JavaScript Web applications must be smooth and fast. Any application that interacts with the user needs to consider how to ensure that memory is used effectively, because if it consumes too much, the page crashes and forces the user to reload. And you can only hide in the corner to cry.

Automatic garbage collection is not a substitute for effective memory management, especially in large, long-running web applications. In this lecture, we will demonstrate how to effectively manage memory through Chrome's devtools.

and learn how to address performance issues such as memory leaks, frequent garbage collection pauses, and overall memory bloat, something that really consumes your energy.

Addy Osmani shows many examples of memory leaks in Chrome V8 in his ppt:

1) Delete the property of an object slows this object (15 times times more memory is consumed)

Copy CodeThe code is as follows:
var o = {x: ' Y '};
Delete o.x; At this point O will become a slow object
o.x; //

var o = {x: ' Y '};
o = null; It should be.

2) Closures

When a variable outside the closure is introduced into the closure, the object cannot be garbage collected (GC) when the closure ends.

Copy CodeThe code is as follows:
var a = function () {
var largestr = new Array (1000000). Join (' x ');
return function () {
return largestr;
}
}();

3) Dom leaks

When the original COM is removed, the child node references are not removed and cannot be reclaimed.

Copy CodeThe code is as follows:
var select = Document.queryselector;
var treeref = select (' #tree ');

Leafref is a sub-node of treefre in the COM tree
var leafref = select (' #leaf ');
var BODY = Select (' body ');

Body.removechild (TREEREF);

#tree不能被回收入, because Treeref is still here.
Workaround:
Treeref = null;

The tree cannot be recycled, because the leaf results leafref still
Leafref = null;

Now the #tree can be released.

4) Timers (fixed) time device leakage

Timers are also a common place to generate memory leaks:

Copy CodeThe code is as follows:
for (var i = 0; i < 90000; i++) {
var buggyobject = {
Callagain:function () {
var ref = this;
var val = setTimeout (function () {
Ref.callagain ();
}, 90000);
}
}

Buggyobject.callagain ();
Although you want to recycle, but the timer's still there.
Buggyobject = null;
}

5) Debug Memory

Chrome's own memory debugging tool makes it easy to see memory usage and memory leaks:
Click on the record in Timeline-I:

Source: http://www.jb51.net/article/54775.htm

Easy to create a few aspects of JavaScript memory leaks