Front-end JS memory management

JS memory management

Memory principle:

Any programming language needs the operating system to allocate memory when executing. However, some languages ​​need to manually manage the allocated memory. Some languages ​​have special ways to manage memory, such as JVM.

After understanding the above concepts, let’s take a look at the general memory cycle.

  • Allocate required memory
  • Use memory
  • Release memory when not in use

JS is a language that automatically manages memory

JS will allocate memory for us when we define data, but the memory allocation methods are different.

  • For original data memory allocation, it is directly placed on the stack space for allocation during execution.
  • For complex data types, a space will be opened in the heap memory and the pointer return value variable of this space will be referenced.

Garbage collection mechanism algorithm

concept:

Because the size of memory is limited, when the memory is no longer needed, we need to release it to free up more memory space.

Compared with manual management of memory release languages, the technical requirements for developers are very high. Once the operation is performed, not only the effect will become poor, but also the masters can achieve high performance but struggle to advance. Therefore, most high-level languages ​​​​are now All implement GC, which is the garbage collection mechanism/garbage collection algorithm.

How does the GC know which objects are no longer used?

People who use design languages ​​to implement GC can always come up with tricks. Here are some common GC algorithms.

Common GC - Reference counting
  • When an object has a reference pointing to it, then the reference of the object is +1;
  • When the reference of an object is 0, the object can be destroyed;

PS: The disadvantage of this algorithm is that it will produce circular references. If ab is added to have attribute references to each other, there will be a problem that neither object can be destroyed.

image-20230226171227258

Common GC algorithm – mark-Sweep

The core idea of ​​this algorithm is to achieve reachability

Set a root object. The garbage collector will periodically start from this root and find all objects that are referenced from the root. Objects that are not referenced are considered unusable objects.

PS: This algorithm can solve the problem of circular reference very well

  • He will continue to search from a root object and mark the object after confirming the search.
  • If it is found that it cannot be found, it means that it cannot be referenced and it will be destroyed (as shown below)
  • The premise is that the RO object will not be deleted, which actually represents the window object in our js

image-20230226182903290

expand

Other GC algorithms

  • When recycling, the Mark-Compact algorithm retains storage objects and moves them to gray-level continuous memory space, integrating free space and avoiding memory fragmentation.
  • Generational collection objects are divided into old and new groups. Many objects will be destroyed after completing the work. Long-term surviving objects will 老旧become
  • Incremental collection
    • If there are many objects and we try to traverse and label the entire set of objects at once, it may take some time and introduce noticeable delays in the execution
    • So the engine tries to divide the garbage collection work into several parts, and then process these parts one by one, so that there will be many small delays instead of one big delay.
  • **Idle-time collection** The garbage collector will only try to run when the CPU is idle to reduce possible impact on code execution.

Closure concept

Closure is a very confusing knowledge point in JavaScript

As a high-level language, JS supports functional programming, which means that in js

  • Function operation and use are very flexible
  • A function can be used as a parameter of another function or as the return value of another function.

So there are many high-order functions in JavaScript. We can write high-order functions ourselves or use built-in functions.

In the future, open source frameworks will also tend to use functional programming.

closure definition

  • The earliest closure was Scheme
  • A closure is actually a structure that stores functions and associated environments.
  • The biggest difference between it and a function is that when a closure is captured, its free variables will be locked and can run as usual even if it is out of the context of capture.

Its function is to allow us to access peripheral variables in functions, saving us a lot of complicated variable processing.

Closure small case

function createAdder(count){
    
    
    funtion adder(num){
    
    
        return count+num
    }
    return adder
}

var adder5 = createAdder(5)
adder(100) // 100+5

This example can easily see the use and benefits of closures

PS: When using closures, it is best to set unnecessary functions or properties to null to help GC recycle and release objects, otherwise memory leaks will increase memory usage.

Browser optimization of closures: When using closures, the browser will release redundant attributes that we are not using to increase performance.

Guess you like

Origin blog.csdn.net/doomwatcher/article/details/129310640