JS garbage collection mechanism and memory leakage

js Garbage collection mechanism

summary

JS Garbage collection mechanism is to prevent memory leakage , The meaning of memory leak is that when a certain block of memory is no longer needed, it still exists , Garbage collection mechanism is to find variables that are no longer used intermittently and irregularly , And free up the memory they point to .

JS Garbage collection way

JS There are two ways in which the garbage collector in the execution environment can detect which memory can be recycled ： Mark clear （mark and sweep）、 Reference count (reference counting).

Mark clear

Most browsers recycle in this way , When a variable enters the execution environment （ Function to declare variables ） When , The garbage collector marks it as “ Enter the environment ”, When variables leave the environment （ End of function execution ） Mark it as “ Leaving the environment ”, After leaving the environment, there are variables that need to be deleted . The way of marking is uncertain , It can be reversal of a particular bit or maintenance of a list .
Workflow

1. Garbage collector , All variables stored in memory are marked at run time .
2. Remove tags for variables in the environment and variables referenced by variables in the environment .
3. The marked variable will be regarded as the variable to be deleted .
4. Garbage collector completes memory cleaning , Destroy the tagged values and reclaim the memory space they occupy .

Reference count

This often causes memory leaks , Low version of the IE In this way . The mechanism is to track the number of references to a value , When a variable is declared and a reference type is assigned to the variable, the number of references to the value is increased by 1, When this variable points to another, the number of references to this value is reduced by one . When the number of references to this value is 0 Will be recycled .
The memory leak caused by this method is typically circular reference , The details will be discussed below .
Workflow

1. Declare a variable and assign a value of reference type to the variable , The reference times of this reference type value are 1.
2. The same value is assigned to another variable , The reference times of this reference type value plus 1.
3. When the variable containing the reference type value is assigned another value , Then the number of references of this reference type value is decreased 1.
4. When the number of references becomes 0 when , It means there's no way to access this value .
5. The next time the garbage collector runs , It will release references times 0 Memory occupied by the value of

Memory leak

What is memory leak

A memory leak is when a piece of memory is no longer used by an application , For some reason , This memory is not returned to the operating system or memory pool . Memory leaks can cause applications to jam or crash .

Conditions that lead to memory leaks and solutions

Memory leak caused by improper use of closures

window.onload = function outerFunction(){
    
    var obj= document.getElementById("eleId");
    obj.onclick = function innerfunction(){
    
        console.log(obj.id);
    }
}

Here to DOM An event is bound to the node , There is a pair of above in the event dom Reference to node , Even if this external function is executed , There are also pairs in the event function obj References to . So his memory cannot be recycled .
terms of settlement

// Manually remove 
 window.onload = function outerFunction(){
    
    var obj= document.getElementById("eleId");
    obj.onclick = function (){
    
        console.log(obj.id);
    }
     obj=null
}

// Define the event handler function outside , Release closure 
function bindEvent() 
{
     
    var obj=document.createElement("XXX"); 
    obj.onclick=onclickHandler; 
} 
function onclickHandler(){
     
    //do something 
}

Circular reference

function sample(){
    
    var a={
    };
    var b={
    };
    a.prop = b;
    b.prop = a;
}

Here is the a and b Memory leak caused by cross reference , It has no effect on mark removal , But it has a great impact on reference counting . Its reference will always be 2

Forgotten timer or callback function

var someResource = getData();
setInterval(function(){
    
    var node = document.getElementById("Node");
    if(node){
    
        node.innerHTML = JSON.stringify(someResource);
    }
},1000);

Such code is common , If id by Node From DOM Remove , The timer will still exist , meanwhile , Because the callback function contains a pair of someResource References to , Outside the timer someResource And will not be released .

Memory leaks due to unexpected global variables
Here's the solution , Use strict mode use strict