Garbage collection mechanism

Garbage collection mechanism

The concept of garbage collection

JS Code runtime , You need to allocate memory space to store variables and values , When the variable no longer participates in the run , The system needs to recover the occupied memory space .

Recycling mechanism

• JS With automatic recycling mechanism , Variables that are no longer used are periodically 、 The memory occupied by the object is released , The principle is to find variables that are no longer used , And then release the memory it's using .
• JS There are global variables and local variables . Global variables will always be stored in memory , Variable memory is not reclaimed until the page is unloaded ; Local variables are declared inside the function , The memory will be reclaimed after the function is executed .
• When using closures , The local variables defined inside the function will remain in memory , Will not be used . So try to avoid using closures , To avoid memory leakage .

Garbage collection way

1. Mark clear ：

• When variables are executed in the environment , Just mark this variable Enter the environment , Marked as Enter the illusion The variable of is not recyclable , Because they are being used . When a variable leaves the environment , Will be marked as Leaving the environment , Marked as Leaving the environment The variable will be released by memory .
• At runtime, the garbage collector marks all variables stored in memory . then , It removes variables in the environment and tags referenced by variables in the environment , The remaining variables will be treated as variables that need to be deleted , The garbage collector completes the memory cleanup , Destroy the marked values and reclaim the memory they occupy .

2. Reference count ：

• Reference count is to track the number of times each value is referenced , When a variable is declared and a reference type is assigned to it , Then the number of references to this value is 1; contrary , If the variable that contains this value reference gets another value , The number of references to this value is reduced 1. When the number of references becomes 0, It means that this variable is useless , The next time the garbage collector runs, it will reclaim memory .
• This method will cause Circular reference problem , for example ：

function fun(){
    
  let obj1 = {
    }
  let obj2 = {
    }
  obj1.a = obj2   // obj1 quote obj2
  obj2.a = obj1   // obj2 quote obj1
}

In the example above ,obj1 and obj2 Cross reference , The number of references to both objects is 2. When the function is finished , Two objects leave the scope , but obj1 and obj2 The number of citations is still 2, Will not be reduced to 0, So it won't be recycled .

The solution is ： Manual memory release .

obj1.a = null
obj2.a = null

Reduce garbage collection

Although browsers can do automatic garbage collection , But when the code is complex , The cost of garbage collection is relatively high , So we should try to reduce garbage collection .

• Optimize the array ： When emptying an array , Assign it to []
• Yes object To optimize ： Objects should be reused as much as possible , For objects that are no longer used , The assignment is null
• Optimize the function ： In the loop Function expression , If it can be reused , Try to put it outside the function

What can cause memory leaks

1. Unexpected global variables ： If a variable is not declared , Will accidentally create a global variable , This will keep the variable in memory and cannot be recycled
2. Forgotten timer or callback function ： Set up setInterval And forget to cancel it , If the loop function has a reference to an external variable , Then this variable will be left in memory all the time , And can't be recycled
3. Closure ： Unreasonable use of closures , Will cause the variable to remain in memory
4. Out of the DOM References to ： Got a DOM Reference to element , And the latter element is deleted , Since the reference to this element has been retained , So it can't be recycled