JavaScript avoids memory leaks and memory management tips _javascript Tips

The examples in this article illustrate the usefulness of JavaScript to avoid memory leaks and memory management techniques. Share for everyone to use for reference. The specific methods are as follows:

This article originates from Google Webperf (London webperf Group), August 26, 2014.

In general, efficient JavaScript Web applications must be fluent 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 article, we will demonstrate how to manage memory efficiently with 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)

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.

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.

var select = Document.queryselector;
var treeref = select (' #tree ');
 
In a COM tree, Leafref is a treefre of the
leafref = select (' #leaf ') of a child node; 
var BODY = Select (' body ');
 
Body.removechild (treeref);
 
#tree不能被回收入, because Treeref is still in
//workaround:
treeref = null;
 
Tree can not 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:

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 timer is still
 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:

I hope this article will help you with the learning of JavaScript programming.