Talk about JavaScript memory release that's something __java

JavaScript language has its own set of memory recycling mechanism, in general, local variables and objects used by the system will be automatically recycled, do not need us to ignore. However, these variables and objects are not recycled in the case of closures, and the memory of page refreshes or jumps is recycled for ordinary Web sites. If you are a Single-page Web site, page switching and data requests are implemented through Ajax without refreshing mechanism, page resources can not be automatically recycled, long time will seriously affect performance, resulting in memory leaks and even page crashes to exit directly, this time manual release without resources is very necessary, including the removal of the DOM, release objects, etc. This article describes how to release a JS object.

first, we need to learn how to use the Chrome Memory analysis tool to view the memory footprint of each object on the page .

1, in the developer tool selected profiles, select Take Heap Snapshot, click the Take Snapshot button

2, select the generated heap snapshot report, enter the object to query on the right

Take a look at the following examples "Note: The practical meaning of the example implementation is just to show what we are going to say today":

HTML section:

<style>
. div1,.div2 {
width:100px;
height:100px;
border:1px solid red;
}
</style>

<div class= "Div1" >
Div1
</div>
<div class= "Div2" >
Div2
</div>

Second, do not form a closed loop, created objects are automatically destroyed after use or manually set to null destroy

1. The system automatically reclaims test object

Window.onload=function () {

  function Test (Dom)
  {this
  . Dom=dom;
This.str= ';
  }
  
  var div1=document.getelementsbyclassname (' Div1 ') [0];
  var mytest=new Test (DIV1); 
  
  
}

2, on the DIV1 click event Monitor added

Window.onload=function () {

  function Test (Dom)
  {this
  . Dom=dom;
This.str= ';
  This.dom.addEventListener (' click ', Function () {}, false);
}
  
  var div1=document.getelementsbyclassname (' Div1 ') [0];
  var mytest=new Test (DIV1); 
  
  
}

There is no reference to the TES object variable in the Listener function, the closure is not formed, so the code will be destroyed automatically after execution.

3, the use of delayed execution

Window.onload=function () {

  function Test (Dom)
  {this
   .  Dom=dom;
This.str= ';
   var self=this;
   var timer = window.settimeout (function () {self.str= ' 123 ';},1000)
}
  
  var div1=document.getelementsbyclassname (' Div1 ') [0];
  var mytest=new Test (DIV1); 
   
}

Using the Window.settimeout delay, the execution function has a reference object attribute, but the reference is one-off and does not form a closed loop

4, the use of the timer

Window.onload=function () {

  function Test (Dom)
  {this
   .  Dom=dom;
This.str= ';
   var self=this;
   var timer = Window.setinterval (function () {}, 1000);
}
  
  var div1=document.getelementsbyclassname (' Div1 ') [0];
  var mytest=new Test (DIV1); 
   
}

There is no reference to object properties in the loop execution function, no closed loop is formed

Third, the formation of a closed loop, the system can not automatically reclaim object resources, and can not manually set the object to null destroy, you can only delete the object property references, and then manually set the object to null destroy

1, the DOM's listener event has a reference to the object properties

Window.onload=function () {

  function Test (Dom)
  {this
  . Dom=dom;
This.str= ';
  This.dom.addEventListener (' click ', Function () {self.str= ' 123 ';}, false);
}
  
  var div1=document.getelementsbyclassname (' Div1 ') [0];
  var mytest=new Test (DIV1); 
   
}

In order to be able to remove the listener event, we will define the listener function individually. The test function adds a prototype method destroy, which is to remove the DOM click Listener event for external invocation.

Add a click event to DIV2 and call the test destroy method to destroy the test object

Window.onload=function () {

  function Test (Dom)
  {this
  . Dom=dom;
This.str= '; 
  This. A=function () {
      this.str= ' 123 ';
  }

This.dom.addEventListener (' click ', self. A, false);
}

Test.prototype.destroy = function () {
var self=this;
This.dom.removeEventListener (' click ', self. A, false);
}
var div1=document.getelementsbyclassname (' Div1 ') [0]; var mytest=new Test (DIV1);

Click Div2 to destroy the test object
var div2obj = document.getelementsbyclassname (' div2 ') [0];
Div2obj.onclick = function () {
Mytest.destroy ();
MyTest = null;
}  }

After clicking on the Div2, the test object disappears with the memory analysis, which means that it has been destroyed

2. There are references to object properties in the Window.setinterval event

Window.onload=function () {

  function Test (Dom)
  {this
  . Dom=dom;
This.str= ';
  This.dom.addEventListener (' click ', Function () {self.str= ' 123 ';}, false);
}
  
  var div1=document.getelementsbyclassname (' Div1 ') [0];
  var mytest=new Test (DIV1); 
   
}

We add an object property timer to receive the Window.setinterval handle and clear the timer in the Destory method.

Window.onload=function () {

  function Test (Dom)
  {this
  . Dom=dom;
This.str= '; 
  This.timer=null;
This.timer = Window.setinterval (function () {self.str = ' 123 ';}, 1000);
}

  Test.prototype.destroy = function () {
window.clearinterval (this.timer);
}

var div1= Document.getelementsbyclassname (' div1 ') [0];  
  var mytest=new Test (DIV1); 

    Click Div2 to destroy the test object
  var div2obj = document.getelementsbyclassname (' div2 ') [0];  Div2obj.onclick = function () { 
Mytest.destroy ();
MyTest = null;
}
}

After clicking on the Div2, the test object disappears with the memory analysis, which means that it has been destroyed

As you can see from the example above, if you want to manually release an object that contains a closure, you must first delete the event that references the object's properties, and then set it to null to consume the object. Such events can be performed multiple times, such as the monitoring of native events, timers. Generally more well-known plug-ins have a method of destroying resources, such as Iscroll plug-ins, there is a destroy prototype method, which is to remove the event to monitor and delete the timer. We can go to see the source code.

Written in the last

One-page Web performance optimization is a long way to go, this article just talked about how to release the created object, in fact, there are many points can be optimized: DOM optimization, animation optimization. I hope we can discuss it with you.