Wechat official account: [Dafront-end Post] follow Dafront-end Post. Questions or suggestions, welcome to leave messages on the public account.

This is the fourth day of my participation in the August More text Challenge. For details, see:August is more challenging

The garbage collection

JavaScript implements memory allocation and idle resource collection periodicity through automatic memory management: every once in a while, the garbage collector runs automatically, determines which variable is no longer used, and frees the memory it occupies.

Tag cleaning is the dominant garbage collection algorithm. The principle is that when the garbage collector is running, it will mark all variables stored in memory. Then, it will remove the tags of all variables in the context and variables referenced by the context. Variables tagged after this point are those to be deleted. The garbage collector then does a memory cleanup, destroying all the tagged values and reclaiming their memory. Reference counting is another garbage collection strategy. The idea is to keep track of how many times each value is referenced. When you declare a variable and assign a reference to it, the number of references is increased by one, and if the variable that holds a reference to that value is overwritten by another value, the number of references is decreased by one. The next time the garbage collector runs, it frees the memory that references the zero value. Reference counting algorithms can lead to circular reference situations

The garbage collector runs periodically, and there can be a performance penalty if many variables are allocated in memory, so the timing of the garbage collection mechanism is especially important.

Modern garbage collectors decide when to run based on probing the JavaScript runtime environment. Detection mechanisms vary from engine to engine, but are generally based on the size and number of allocated objects.

Memory management

One of the best ways to optimize memory footprint is to ensure that only necessary data is saved when the code is executed. If the data is no longer necessary, set it to NULL to free its reference. This can also be called dereferencing. This advice works best for properties of global variables and global objects. Local variables are automatically dereferenced when they go out of scope. Keeping the memory footprint to a small value results in better page performance.

function createPerson(name){ let localPerson = new Object(); localPerson.name = name; return localPerson; } let globalPerson = createPerson("James"); GlobalPerson = null;Copy the code

The key to dereferencing is to ensure that the relevant value is no longer in the context, so it will be collected in the next garbage collection.

In a programming environment that uses garbage collection, developers usually don’t have to worry about memory management. But a good programmer should know how to optimize memory management through coding.

Const and let declarations improve performance

Both const and let can declare block-level scope rather than function scope, and using const and let may cause the garbage collector to step in to reclaim the memory that should be reclaimed earlier than using var.

A memory leak

Most memory leaks in JavaScript are caused by unreasonable references.

  • Avoid creating global variables
Function setName() {// name = 'James' // × cosnt name = 'James' // √}Copy the code
  • Clear the timer when it is not in use
Let time = setInterval(() => {console.log(num)}) clearInterval(time)Copy the code
  • The use of closures can easily cause memory leaks
let outer = function() { let num = 123 return function() { return num } } let getNum = outer() // use getNum getNum = Null // Note that references to closures are cleared after useCopy the code

Hidden classes

Chrome is currently the most popular browser and uses the V8 JavaScript engine. V8 makes use of “hidden classes” when compiling interpreted JavaScript code into actual machine code. At run time, V8 associates the created objects with the hidden classes to track their property characteristics. Objects that can share the same hidden class will perform better.

function Person() {
  this.sex = 'male'
}
let p1 = new Person()
let p2 = new Person()
Copy the code

The above code V8 is configured in the background so that both instances P1 and P2 share the same hidden class because they share the same constructor and prototype.

p2.name = 'James'
Copy the code

By adding this code, P1 and P2 will correspond to different hidden classes. Depending on the frequency of this operation and the size of the hidden class, this can have a significant impact on performance.

The solution is to declare all the properties at once in the constructor

function Person(name) {
  this.sex = 'male'
  this.name = name
}
let p1 = new Person()
let p2 = new Person('James')
Copy the code

Once again, two instances can share a hidden class, resulting in a potential performance boost

Deleting properties dynamically has the same consequences as adding them dynamically

function Person() {
  this.sex = 'male'
  this.age = 18
}
let p1 = new Person()
let p2 = new Person()

delete p1.age
Copy the code

After the above code, even if two instances use the same constructor, they no longer share a hidden class

The solution is to set the unwanted property to NULL

function Person() {
  this.sex = 'male'
  this.age = 18
}
let p1 = new Person()
let p2 = new Person()

p1.age = null
Copy the code

The two instances will continue to share a hidden class, while still having the effect of removing the reference value for garbage collection

Pay attention to the following [big front post]
Let’s learn and make progress together

【 Share, like, watch 】 three consecutive, let more people join us ~~