preface

Most languages provide automatic memory management mechanisms, such as C#, Java, and JavaScript. The automatic memory management mechanism is also known as the garbage collection mechanism. The language collects garbage, haha 😄, but the garbage here is not the kitchen waste at home, but the memory occupied by some variables that are no longer used. Our JS execution environment will automatically collect the garbage, that is, release the memory occupied by variables that are no longer used. The garbage collection process will periodically perform the garbage collection at fixed intervals

Memory leaks

What if the memory occupied by variables that are no longer used is not freed?? That would cause a memory leak

What is a memory leak?? Don’t worry about looking down

In fact, memory leakage is the heap memory that has been dynamically allocated in our program. Due to some reasons, it is not released, resulting in the waste of system memory, which leads to the serious consequences such as slowing down the running speed of the program and even system crash. Now you can see why there is a garbage collection mechanism

Garbage collection mechanism

☺ the garbage collection mechanism is helpful to understand

let name = 'Symbol.;

function aboutMe() {

  let hobby = 'Eat meat meat';

  let say=I was `${name}, I like${hobby}`;

  console.log(say);

}

aboutMe()

Copy the code

When aboutMe () is executed, there are two local variables called Hobby and say, which are no longer used, so the garbage collection mechanism will remove the unused (local) variables called hobby and say (free their memory).

There are two ways to implement such garbage collection in JS: tag cleanup and reference counting

Mark clear

Tag cleanup is the most common garbage collection method in JS. Its principle is also relatively easy to understand, nonsense not to say, first on the code

function speakLines(){

  let night="Dark";// Make a mark and enter the environment

  let closeEyes="Close your eyes";// Make a mark and enter the environment

  let speak='Werewolf killing begins,${night}please${closeEyes}`;// Make a mark and enter the environment

  console.log(speak);

}

speakLines() // After the code is executed, the marked variable is marked out of the environment and finally recycled



Copy the code

When code is executed in an environment (such as the speakLines function above), each variable declared is marked for that variable (such as marking an entry into the execution environment); When code execution into another environment, also is to leave an environment (speakLines function and to perform other functions), and then on to a environment variables in a tag, a leave the execution environment (e.g., tags), by the time the garbage collection implementation, according to mark to decide which variables to free memory to remove

Reference counting

Reference counting is a less common method of garbage collection. Again, it’s code first

let skill = ["Sing"."Play the guitar."."Broadcasting"]

function change() {

  let new_skill = ["vue"."react"."node"."webpack".".net"."mysql"."sqlServer"."nginx"];

  skill = new_skill;

  // A literary teenager has thus become a technical nerd

}

change()

console.log(skill)  / / return [" vue ", "react", "node", "webpack" and ".net ", "mysql", "used", "nginx"]

Copy the code

The local variable new_skill is not garbage collected when change() internally declares a local variable new_skill and assigns an array of reference types to it, as well as to the global variable skill. Ah, why?? Remember the garbage collection we talked about above, which collects variables that are no longer in use and frees their memory, because the local variable new_skill is not a local variable that is no longer in use, it is referenced by the global variable skill (which is still in use) and therefore will not be collected.

The above process uses the garbage collection method of reference counting

Reference counting strategy is to track the number of each value is used, when declaring a variable and will be a reference type assigned to the variable when the value of the reference number is, if it is the value of a variable into another, then the value of reference number minus 1, when the value of citations to 0, show that no variables in use, This value can no longer be accessed, so the space it occupies can be reclaimed. When garbage collection is done, references to 0 times are reclaimed, freeing the corresponding memory

let skill = ["Sing"."Play the guitar."."Broadcasting"]

function change() {

  let new_skill = ["vue"."react"."node"."webpack".".net"."mysql"."sqlServer"."nginx"];// The number of references is 0

  skill = new_skill; //// has been quoted for 1 times

}

change()

console.log(skill) 

Copy the code

Memory management

In our project, we definitely wanted to use less memory for better page performance. This time we need to manually manage the memory, timely to release data reference. We can store only the data we need into variables. Once the data is no longer in use, we need to manually assign null to the variable to release the reference to the data. (——- dereference) Most of the things that need to be manually dereferenced are global variables, because local variables are automatically cleared when they leave the environment.

let skill = ["Sing"."Play the guitar."."Broadcasting"]

function change() {

  let new_skill = ["vue"."react"."node"."webpack".".net"."mysql"."sqlServer"."nginx"]

  skill = new_skill;

  // A literary teenager has thus become a technical nerd

}

change()

console.log(skill) 

skill = null;// Assign variables that are no longer in use unll to release data references

Copy the code

The local variable new_skill declared inside change() is referenced by the global variable skill, so the number of references to the variable new_skill is 1. In order to clear the reference to the variable new_skill, in the last line of the code, Skill (new_skill) = skill (skill); skill (skill) = new_skill (skill) = new_skill (skill); skill (skill) = new_skill (skill); When the garbage collection mechanism is running, new_skill has zero references and is cleared as a useless variable, freeing memory and improving performance.

History oliver

  • ES11 is here. Why don’t you check it out
  • Second understand js scope and scope chain
  • Here is the git command you need