Garbage collection mechanism

•     The Javascript of the browser has an automatic garbage collection mechanism, and the execution environment will be responsible for managing the memory used during code execution.
•    The principle is: the garbage collector will periodically (periodically) find out those variables that are no longer in use and free their memory. However, this process is not real-time, because it is expensive and stops responding to other operations during GC, so the garbage collector will execute periodically at fixed time intervals.

  Only variables within a function can be recycled  

• There are two garbage collection mechanisms:
• Mark clear     The following code: [most commonly used]

• function test(){
  var a = 10 ;       // Marked to enter the environment 
  var b = 20 ;       // Marked to enter the environment
  }
  test();            // After execution, a and b are marked out of the environment and recycled.

        The most common garbage collection method in js is tag cleanup. When a variable enters the environment, such as declaring a variable in a function, the variable is marked as "entering the environment". Logically, the memory occupied by variables entering the environment can never be released, because they may be used as long as the execution flow enters the corresponding environment. When a variable leaves the environment, it is marked as "leaving the environment".

• Reference count

        The meaning of reference count is to track the number of times each value is referenced.

        When a variable is declared and a reference type value is assigned to the variable, the number of references to this value is 1.

          If the same value is assigned to another variable, the number of references to the value is increased by 1. Conversely, if the variable containing a reference to this value gets another value, the number of references to this value is reduced by 1.

          When the number of references of this value becomes 0, it means that there is no way to access this value again, so the memory space occupied by it can be reclaimed. In this way, when the garbage collector runs again the next time, it will free up the memory occupied by values with 0 references.

 

function test() {
    var a = {};    // a refers to the object 1 times
    var b = a;     // a the number of references to the object plus 1 is 2
    var c = a;     // a the number of references to the object plus 1 is 3
    var b = {};    // a the number of references to the object is reduced by 1 to 2
}

 

•   What is a memory leak?

• The program needs memory to run. As long as the program requests, the operating system or runtime must supply memory.

  For the continuously running service process (daemon), the memory that is no longer used must be released in time. Otherwise, the memory occupation will be higher and higher, which will affect the system performance at first, and then cause the process to crash at last.

  The memory that is no longer used is not released in time, which is called memory leak.

•   Memory leaks are divided into memory leaks in Vue and memory leaks in js

• Memory leak in Vue

      1. If JS is used in the mounted/created hook to bind events in DOM/BOM objects, corresponding unbinding needs to be done in beforeDestroy;

      2. If the third-party library initialization is used in the mounted/created hook, it needs to be destroyed in beforeDestroy (generally not used, because it is often directly global Vue.use);

      3. If setInterval is used in the component, it needs to be destroyed in beforeDestroy;

mounted() {
    const box = document.getElementById('time-line')
    this.width = box.offsetWidth
    this.resizefun = () => {
      this.width = box.offsetWidth
    }
    window.addEventListener('resize', this.resizefun)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizefun)
    this.resizefun = null
  }

• Memory leak in js

• 1. Circular reference

        A DOM object is referenced by a Javascript object, and at the same time, it references the same or other Javascript objects. This DOM object may cause memory leakage. The reference to this DOM object will not be collected by the garbage collector when the script stops. To break a circular reference, an object that references a DOM element or a reference to a DOM object needs to be assigned null.

•   2. Closure

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

•   3.DOM leakage

      When the original COM is removed, the child 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 child node of treefr
var leafRef = select('#leaf'); 
var body = select('body');
 
body.removeChild(treeRef);
 
//#tree cannot be returned to revenue because treeRef is still there
//resolvent:
treeRef = null;
 
//The tree cannot be recycled because the leaf result leafRef is still there
leafRef = null;

• 4. Timer and timer leakage (also common 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, the timer is still there
  buggyObject = null;
}