js Garbage Collection Mechanism principle gives you a clear chat

The article comes from the public number: front-end Symbollu, author Symbollou

preface

Most languages provide automated memory management mechanisms, such as C#, Java, and JavaScript. A utomatic memory management is what we often hear about garbage collection. G ood magic Oh, the language will collect garbage, haha, but here's garbage, but not the kitchen waste inside the home or something, but some of the variables no longer used to occupy the memory. Our JavaScript execution environment automatically recycles the garbage, which frees up memory occupied by variables that are no longer in use, and the garbage collection process periodically performs garbage collection at regular intervals

Memory leak

What if the memory occupied by variables that are no longer in use is not released??? That would result in a memory leak

What is a memory leak??? Don't look down in a hurry

Memory leakage is actually the heap memory that has been dynamically allocated in our program, and for some reason it has not been freed, resulting in a waste of system memory that causes the program to slow down or even crash. The consequences are serious Oh, now I know why there is a garbage collection mechanism

Garbage collection mechanism

Look at this code to better understand the garbage collection mechanism Oh☺

let name = '编程狮';
function aboutMe() {
  let hobby = '吃肉肉';
  let say=`我是${name},我喜欢${hobby}`;
  console.log(say);
}
aboutMe()

When the function aboutMe（） executes, two local hobby and say are declared, and when the function is finished, the two local variables are no longer in use, so the garbage collection mechanism clears (frees up) the (local) hobby and say that will no longer be used )

There are two ways to implement such garbage collection capabilities in JavaScript: Tag Clear and Reference Count

Mark clear

Tag removal is the most commonly used garbage collection method in js. Its principle is also better understood, nonsense is not much to say, first on the code

function speakLines(){
  let night="天黑";//做个标记 ，进入环境 
  let closeEyes="闭眼";//做个标记 ，进入环境 
  let speak=`开始狼人杀，${night}请${closeEyes}`;//做个标记 ，进入环境 
  console.log(speak);
}
speakLines() //代码执行完毕  里面被标记过的变量，又被标记 离开环境 最后被回收

When code executes in one environment (such as the speakLines function above), each declaration of a variable is marked (for example, to mark one into the execution environment), and when code execution enters another environment, that is, to leave the previous environment speakLines function is executed and other functions are executed, a marker is made on the variable in the previous environment (for example, to mark a departure from the execution environment), and when garbage collection is performed, the tag determines which variables to clear to free up memory

Reference count

Reference counting is a less common method of garbage collection. It's also about code before you talk about the principle

let skill = ["唱歌", "弹吉他", "播音"]
function change() {
  let new_skill = ["vue", "react", "node", "webpack", ".net", "mysql", "sqlServer", "nginx"];
  skill = new_skill;
  //一个文艺小青年就这样的变成了一个技术宅男
}
change()
console.log(skill)  //返回  ["vue", "react", "node", "webpack", ".net", "mysql", "sqlServer", "nginx"]

change() internally declares a local variable new_skill and assigns it an array of reference types, while assigning the variable new_skill to the global variable skill at which point the local variable new_skill is not garbage collected. A h, why??? Remember what we said above about garbage collection, recycling variables that are no longer in use, freeing up their memory, because new_skill local variable new_skill is not a local variable that is no longer in use, it is referenced by the global variable skill (still in use), so it will not be recycled.

The above procedure uses the garbage collection method that references the count

The policy for reference counts is to track the number of times each value is used, add 1 when a variable is declared and assigned a reference type to the variable, and if the value of the variable becomes another, the number of references to the value is reduced by 1, when the number of references to this value becomes 0, indicating that no variable is in use, the value cannot be accessed, so the space occupied by it can be recycled, and when garbage collection is made, the corresponding memory will be recycled with references of 0

let skill = ["唱歌", "弹吉他", "播音"]
function change() {
  let new_skill = ["vue", "react", "node", "webpack", ".net", "mysql", "sqlServer", "nginx"];//被引用次数为0 
  skill = new_skill; ////被引用次数为1
}
change()
console.log(skill) 

Manage memory

In our project, we definitely want to use less memory to make the page perform better. T his time we need to manually manage memory, timely release of data references. W e can store only the data we need into variables. O nce this data is no longer in use, we need to manually assign null to the variable to release the reference to the data. Most of the variables that require us to manually dereference are global variables, because local variables are automatically cleared when they leave the environment.

let skill = ["唱歌", "弹吉他", "播音"]
function change() {
  let new_skill = ["vue", "react", "node", "webpack", ".net", "mysql", "sqlServer", "nginx"]
  skill = new_skill;
  //一个文艺小青年就这样的变成了一个技术宅男
}
change()
console.log(skill) 
skill = null;//将不再使用的变量进行赋值 unll  来释放数据引用

change() The internally declared local variable new_skill is referenced by the global variable skill so at this point the number of references to the variable new_skill is 1, so in order for the variable new_skill to be cleared of the reference, on the last line of the code, assign a null to the global variable skill manually unreference the variable skill to the variable new_skill at which point new_skill number of references to the variable new_skill is reduced by 1, so the number of references to the current new_skill is 0. When the garbage collection mechanism is implemented, it is found that the number of references to new_skill is 0, and the variable is cleared as a useless variable, freeing up memory and improving performance.

The above is W3Cschool编程狮 about the js garbage collection mechanism principle to give you a clear and clear description of the relevant, I hope to help you.