Several aspects that easily cause JavaScript memory leaks_javascript tips

Published in Google WebPerf (London WebPerf Group), August 26, 2014.

Efficient JavaScript web applications must be smooth and fast. Any application that interacts with users needs to consider how to ensure that memory is used efficiently, because if too much is consumed, the page will crash, forcing the user to reload. And you can only hide in the corner and cry.

Automatic garbage collection is no 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 fix performance issues like memory leaks, frequent garbage collection pauses, and overall memory bloat, the stuff that's really killing you.

Addy Osmani showed many examples of memory leaks in Chrome V8 in his PPT:

1) Deleting the properties of an Object will slow down the object (consuming 15 times more memory)

Copy code The code is as follows:

var o = { x: 'y' };
delete o.x; //At this time o will become a slow object
o.x; //

var o = { x: 'y' };
o = null; //It should be like this

2) Closure

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

Copy code The code is as follows:

var a = function() {
var largeStr = new Array(1000000).join('x');
return function() {
Return largeStr;
}
}();

3) DOM leak

When the original COM is removed, the child node reference cannot be recycled unless it is removed.

Copy code The code is as follows:

var select = document.querySelector;
var treeRef = select('#tree');

//In the COM tree, leafRef is a child node of treeFre
var leafRef = select('#leaf');
var body = select('body');

body.removeChild(treeRef);

//#tree cannot be recycled because treeRef is still there
//Solution:
treeRef = null;

//The tree cannot be recycled yet because the leaf result leafRef is still there
leafRef = null;

//Now the #tree can be released.

4) Timers leakage

Timers are also a common place where memory leaks occur:

Copy code The 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, the timer is still there
buggyObject = null;
}

5) Debug memory

Chrome’s built-in memory debugging tool can easily check memory usage and memory leaks:
Click record in Timeline -> Memory:

For more information, please view the original PPT.