How to Avoid JavaScript Memory leakage and memory management skills

Efficient JavaScriptWeb applications must be smooth and fast. Any application that interacts with the user needs to consider how to ensure the effective use of memory, because if the consumption is too large, the page will crash and force the user to reload. You can only hide in the corner and cry. Efficient JavaScript Web applications must be smooth and fast. Any application that interacts with the user needs to consider how to ensure the effective use of memory, because if the consumption is too large, the page will crash and force the user to reload. You can only hide in the corner and cry.

Automatic garbage collection cannot replace effective memory management, especially in large, long-running Web applications. In this lecture, we will demonstrate how to effectively manage the memory through Chrome's DevTools.

Learn how to solve performance problems, such as memory leakage, frequent garbage collection pauses, and overall memory expansion, which truly consumes your energy.

Addy Osmani shows many examples of Memory leakage in Chrome V8 in his PPT:

1) Deleting an Object attribute slows down the Object (15 times more memory consumption)

Var o = {x: 'y'}; delete o. x; // at this time, o will become a slow object o. x; // var o = {x: 'y'}; o = null; // this should be the case

2) Closure

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

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

3) DOM Leakage

When the original COM is removed, the sub-node reference cannot be recycled if it is not removed.

Var select = document. querySelector; var treeRef = select ('# tree'); // In the COM tree, leafRef is a subnode of treeFre. var leafRef = select (' # leaf '); var body = select ('body'); body. removeChild (treeRef); // # tree cannot be returned because treeRef is still in progress. // solution: treeRef = null; // tree cannot be recycled yet, because the leaf result leafRef is still in leafRef = null; // now # tree can be released.

4) leakage of Timers Timer

The timer is also a common cause of Memory leakage:

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 it, timer is still buggyObject = null ;}

5) debugging memory

Chrome's built-in memory debugging tool allows you to conveniently view memory usage and Memory leakage:

In Timeline-> Memory, click record: