Easy to cause JavaScript memory leaks several aspects _javascript tips

Posted in Google Webperf (London webperf Group), August 26, 2014.

Efficient JavaScript Web applications must be smooth and fast. Any application that interacts with the user needs to consider how to make sure that memory is used efficiently, because if you consume too much, the page crashes and forces the user to reload. And you can only hide in the corner and 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 manage memory efficiently through chrome devtools.

and learn how to troubleshoot performance problems, such as memory leaks, frequent garbage collection pauses, and overall memory bloat, something that really makes you energy-intensive.

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

1 Delete An object's properties will slow it down (cost 15 times times more memory)

Copy Code code 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) closure

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

Copy Code code as follows:

var a = function () {
var largestr = new Array (1000000). Join (' x ');
return function () {
return largestr;
}
}();

3) Dom leaks

When the existing COM is removed, the child node reference is not removed and cannot be reclaimed.

Copy Code code as follows:

var select = Document.queryselector;
var treeref = select (' #tree ');

Leafref is a child node of treefre in a 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 leaves are still leafref.
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 Code code 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 ();
You want to recycle it, but the timer's still there.
Buggyobject = null;
}

5) Debugging Memory

Chrome's own memory debugging tool makes it easy to see memory usage and memory leaks:
Click the record at Timeline-> Memory:

For more information, please see the original PPT.