Performance optimization in JavaScript 1

Article description: This article is the notes and experience of the front-end training camp of Regao. If there is something wrong, I hope you can point out and teach, thank you!

The content of this article:

Memory management
Garbage collection and common GC algorithms
Garbage collection of V8 engine
performance tools
Code optimization example

One, memory management

Memory: Consists of readable and writable units, representing a piece of operational space
Management: artificially operate the application, use and release of a space
Memory management: developers actively apply for space, use space, and release space
Management process: application-use-release

Memory management in JavaScript

Request memory space
Use memory space
Free up memory space

//申请
// 在JavaScript中执行引擎中遇到变量定义时自动分配给我们一个相应的空间，相当于定义一个变量：
let obj = {}

//使用，相当于读取的操作
obj.name = 'lg'

//释放 
obj = null 
//相当于按照内存管理的流程去实现这样一个内存管理

2. Garbage collection in JavaScript

Memory management in JavaScript is automatic. Whenever we create an object, array or function, it will automatically allocate a certain amount of memory space. During the subsequent execution of the code, if some objects cannot be found through some reference relationships. , These objects will be regarded as garbage, or that these objects actually already exist, but due to some inappropriate syntax or structural errors in our code, we can’t find such an object again. The object is also called garbage
Objects are garbage when they are no longer referenced
The object cannot be accessed from the root and is garbage

The JavaScript engine will recycle the above garbage memory

Reachable objects in JavaScript:

The object that can be accessed is the reachable object (reference, scope chain)
The standard of reachability is whether it can be found from the root
The root in JavaScript can be understood as a global variable object

let obj = {name:'xm'}

let ali = obj 

obj = null //此时ali 这个对象仍然能够访问到{name:'xm'}这个空间，{name：'xm'}是可达的

function objGroup(obj1,obj2){
    obj1.next = obj2
    obj2.next = obj1

    return {
        o1:obj1,
        o2:obj2
    }
}

let obj = objGroup({name:'obj1'},{name:'obj2'})

console.log(obj)
/*{
    o1: { name: 'obj1', next: { name: 'obj2', next: [Circular] } },
    o2: { name: 'obj2', next: { name: 'obj1', next: [Circular] } } 
  }
  */

The following figure is the reachability diagram of the above objects:

The above figure shows that all objects can be accessed by paths. If the access path of {name:obj1} is cut off, the object becomes unreachable and will become garbage and be recycled, as shown in the following figure:

Three, GC algorithm introduction

1. GC definition and role

GC is shorthand for garbage collection mechanism
GC can rise to garbage in memory and release and reclaim space

What is the garbage in Gc?

Objects no longer needed in the program

function func(){
    name = 'lg'
    return `${name} is a coder`
}

func()//某个数据使用完后上下文不再去用它了，就可以把它当做垃圾来看待，当函数调用完以后，这里已经不再需要name了，根据需求方面考虑被当做垃圾回收

Objects that can no longer be accessed in the program

function func(){
    const name = 'lg'
    return `${name} is a coder`
}

func()//函数调用完后，外部的空间不能再访问到它了，当我们找不到它的时候，它也可以算作是垃圾

2.GC algorithm

GC is a mechanism, the garbage collector completes the specific work
The content of work is to find garbage to release space and reclaim space
Algorithms are the rules for finding and recycling at work

Common GC algorithms:

Reference count
Mark clear
Mark up
Generational collection

The above will be discussed later.

3. Principles of Reference Counting Algorithm Implementation

The core idea: Set the reference counter to determine whether the current reference count is 0 (when the reference count is 0, the GC starts to work, and the object space where it is located is recycled and released for reuse)
Reference counter (compared to other GC algorithms, it is precisely because of the existence of the reference counter that the execution efficiency of reference counting may be different from other counting algorithms)
Modify the reference number when the reference relationship changes (when the object reference relationship changes, the reference counter will actively modify the reference value corresponding to the current object. When there is an object space in our code, there is currently a variable pointing to it, then this At that time, we add one to the value. If the object has other variables pointing to it, then add one more. If it decreases, it decreases by one. If the count reaches 0, the GC will immediately reclaim it.)
Recycle immediately when the reference number is 0

// reference count

const user1 = {age:11}
const user2 = {age:22}
const user3 = {age:33}

const nameList = [user1.age,user2.age,user3.age]//user1到3还被这个数组引用着，不会被回收

function fn(){
    const num1 = 1
    const num2 = 2
}

fn()//当函数调用完毕后，num1和num2无法被外部使用，引用计数为0会被回收

4. Advantages and disadvantages of reference counting algorithm

advantage:

Recycle immediately when garbage is found
Minimize program pauses: The application program will inevitably consume memory during execution and the current execution platform's memory must have an upper limit, so when the memory is definitely full, it is not enough. Because the reference counting algorithm is always monitoring those Referencing an object with a number of 0, so we think: an extreme phenomenon is that when the memory is about to be full, then the reference counter will immediately find the object space with a value of 0, and then release it, so as to ensure The memory will not be full

Disadvantages:

Cannot reclaim circularly referenced objects

function fn(){
    const obj1 = {}
    const obj2 = {}

    obj1.name = obj2
    obj2.name = obj1

    return 'lg is a coder'
}

fn()

After the execution is over, the space inside it will definitely involve space recycling, such as obj1 and obj2. In the global place, we no longer point to them, so at this time its reference count should be 0, but there is a problem at this time. In the function, we will find that when we want to go to the GC to delete obj1, it will tell us that obj2 has an attribute pointing to obj1, although according to the previous rules, Obj1 and obj2 are not found in the global scope, but because there is obviously a mutual guiding relationship between them in such a scope, in this case, the value of their reference counter is not 0. At this time, the GC under the reference counting algorithm has no way to reclaim these two spaces, resulting in a waste of memory space, which is a circular reference between objects.

Time cost is large: The time cost of the algorithm will be larger, because the current reference count needs to maintain a value change. In this case, it must constantly monitor whether the reference value of the current object needs to be modified. This object It takes time to modify the value of, and if there are many objects, it will consume more time

5. Implementation principle of mark removal algorithm

Core idea: to complete in two stages: mark and clear
Traverse all objects to find and mark the active object. The active object is the same as the reachable object: in this stage, it is necessary to find all reachable objects. If a hierarchical relationship is referenced here, then it will go back and search recursively, just like The process of global looking for A and then D. After the search is completed, these reachable objects are marked

Traverse all objects to clear the unmarked objects, and erase the marks of the previous stage: After the mark is completed, start to clear, find those objects that have not been marked, and clear the marks at the same time, thus completing a recycling

Reclaim the corresponding space: After reclaiming, the space will be placed on the current free list, and subsequent programs can directly apply for the space here

Advantages of mark removal algorithm:

It can solve the recycling operation of object circular references. When writing code, a reachable object such as a, b, and c may be defined globally, but we also have some local scopes of functions. For example, a1 is currently defined in the function. , b1, and let them refer to each other. The call to this kind of function must release their internal space after the end. In this case, once a function call ends, its local space variables lose their current The connection of the global global in the scope, a1 and b1 cannot be accessed under our global global root, it is an unreachable object, and the unreachable object will not be marked in the marking phase. In the second recycling phase When reclaiming, directly find the unmarked object and clear and release its internal space. This advantage is relative to the reference counting algorithm.

Disadvantages of mark removal algorithm:

Space fragmentation: Because of the garbage object we are currently retracting, it is not continuous in address. After we reclaim it, they are scattered in every corner. If we want to use it later, if it happens to happen, we will apply for a new space. It just matches their size, then it can be used directly, once it is more or less, we are not suitable for use. If the space of 1.5 domains is applied for in the space link list, then the two reclaimed space addresses will not match.

Fourth, the principle of tag sorting algorithm

Marking can be seen as an enhancement of mark removal
The operation of the mark phase is the same as that of the mark removal
In the cleaning phase, it will be sorted first and move the object position

Mark the active object before recycling, move the active object to one end when sorting, and then directly release the memory other than the active object

Five, get to know V8

V8 is a mainstream JavaScript execution engine
V8 uses just-in-time compilation
V8 memory limit (64-bit 1.5GB, 32-bit 700MB)

Sixth, V8 garbage collection strategy

Adopt the idea of generational recycling: The main thing is to divide our current memory space into two categories according to certain rules.
The memory is divided into the young generation and the old generation storage area
Use different algorithms for different objects

Commonly used GC algorithms in V8:

Generational collection
Space copy
Mark clear
Mark up
Mark increment

Details follow-up introduction

Seven, how does V8 reclaim young generation objects

V8 memory space is divided into two
Small space is used to store new generation objects (32M|16M): 64-bit operating system is 32M, 32-bit operating system is 16M
The new generation refers to objects with a short survival time: for example, there is a local scope in the current code, and the variables in this scope must be recycled after the execution is completed, and in other places such as the global There is also a variable, which must wait until our program exits before it can be recycled, so the new generation is those objects with a shorter survival time.

New generation object recycling implementation

Recycling process adopts copy algorithm + marking and sorting
The Cenozoic memory is divided into two equal-sized spaces: the shorter survival time is called the Cenozoic object
The used space is From, and the free space is To
Active objects are stored in the From space
Copy the active object to To after marking
From and To exchange space to complete the release

Recycling details

Promotion may occur during the copy process
Promotion is to move objects of the new generation to the old generation
The new generation that survives a round of GC needs to be promoted
The usage rate of the To space exceeds 25%: In the future recycling operation, the From space and the To space will eventually need to be exchanged. The previous To becomes From and From becomes To, which means that if the usage rate of To reaches 80% , Then finally it becomes the storage space of the active object, then the new object does not seem to be stored in it

How does V8 reclaim objects in the old generation?

Old age objects are stored in the old age area on the right
64-bit operating system 1.4G, 32 operating system 700M
Objects of the old generation refer to objects that have a longer survival time

Old generation object recycling implementation

Mainly use mark removal, mark sorting, and incremental mark algorithms
First use the mark to clear the garbage space to complete the recycling
Use tagging to optimize space
Use incremental mark for efficiency optimization: When garbage collection is working, it will actually block the execution of JavaScript programs, so there will be a gap period. For example, after the program is executed, it will stop and execute the current recycling operation. The mark increment is to split our current entire garbage collection operation into multiple small steps to complete the current entire collection, so as to replace the garbage collection that we completed in one go. The following figure is very obvious, mainly let us achieve the completion of garbage collection and program execution alternately, instead of garbage collection when the program is executed before, so the time consumption is more reasonable.

Detail comparison

New generation area garbage collection uses space for time
The old generation area garbage collection is not suitable for the copy algorithm: the storage space of the old generation is relatively large, if it is divided into two, then basically a few hundred M of space is wasteful, so it is too extravagant. There are more object data stored in the storage area of the old generation, and the copying process consumes a lot of time, so it is not suitable.

Share here first, the next article introduces Performance tools