js performance optimization related content notes finishing

GC algorithm

1. Reference counting

Core idea: Set the number of references, and judge whether the current reference is 0

advantage:

1. When garbage is found, recycle immediately
2. Minimize program pauses

shortcoming:

1. Cannot reclaim circularly referenced objects
2. Large time overhead (need to monitor changes in count value)

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

2. Mark removal

Core idea: Mark and clear two stages

shortcoming:
1. Space fragmentation (discontinuity of reclaimed objects in addresses)
2. Cannot be recycled immediately

3. Marking

Mark, and then sort the addresses of the active objects, try to make the addresses of the active objects continuous

4. Generational collection

Recycling young generation objects (variable objects with a shorter survival time)

• Recycling process adopts copy algorithm + marking and sorting
• The new generation memory is divided into two equal-sized spaces
• The used space is From, used to store active objects, and the free space is To, used to store active objects in From
• 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: There may be promotion in the copy process between From and To (moving the young generation object to the old generation). Promotion will occur in the following two situations

• The new generation that survived a round of GC needs to be promoted
• The usage rate of To space exceeds 25%

Recycle old generation objects

Large space, unable to use copy algorithm, use incremental marking method to optimize efficiency

• Mark clear
• Tag finishing: Make the addresses of active objects continuous
• Marking increment: Split the original marking work into multiple small marking work to prevent program blocking

V8

v8 garbage collection strategy

v8 memory has an upper limit

1. Adopt generational recycling idea
2. Memory is divided into young generation and old generation
3. Use different algorithms for different objects

Commonly used algorithms

• Generational collection
• Space copy
• Mark clear
• Mark up
• Mark increment

What will frequent GC (garbage collection) bring?

• When the GC is working, the application is stopped
• Frequent and too long GC will cause application to die
• Users perceive application freezes during use

How to determine whether to recycle garbage frequently:

• Frequent rise and fall in the Timeline
• Frequent increase and decrease of data in task manager

Heap snapshot search and separate dom, these are all useless dom references, you need to use the heap snapshot function to super find
detachedNode

v8 engine execution process

Code optimization function nesting will cause v8 to perform multiple pre-analysis, so do not nest too deep

Stack operation

• js execution environment
• Execution context stack (ECStack, execution context stack)
• Execution context
• VO(G), global variable object
• EC(G), global execution context

Basic type (stack operation)

• Basic data types are operated by value
• The basic data type value is stored in the stack area
• Regardless of the stack memory we currently see, or the heap memory that will be used by subsequent reference data types, all belong to computer memory
• GO (Global Object)

Reference type (heap operation)

1. Function execution

   1. Determine the scope chain (current execution context, superior execution context)
   2. Determine this point, if it is in the global scope, then it is window
   3. Initialize the arguments object
   4. Formal parameter assignment
   5. Variable promotion (keyword of var declaration, or function declaration inside a function)
   6. Execute code
   7. If the function is not referenced by other places, then the stack operation will be performed to release the stack memory

2. Closure understanding

   function fn() {
    var a = 1
    return function(b) {
        console.log(a + b)
    }
   }
   const f = fn()
   f(5)
   f10()

   1. Closure is a mechanism to protect the variables in it through a private context
   2. It can also be considered that a closure is formed when a certain execution context created is not released
   3. Protect and save data

Add events in a loop, depending on the trade-offs in the use of closures

If you use closures to register multiple events, because of closures, you will apply for a pair of addresses to save. If there are more events, the more memory is requested, so you need to use event agents.

Variable declaration

Variable declarations are best placed in local variables, otherwise it will take more time to find variables on the scope chain when the code is executed. Compare the following two code using the tool 161c891933c103 jsbench

var i, str = ""

function parseDom() {
   for(i = 0; i < 100; i++) {
       str += i
   }
}
parseDom()

function parseDom() {
   let str = ''
   for(let i = 0; i < 100; i++) {
       str += i
   }
}
parseDom()

Variable cache

• Array length
• Dom variables used multiple times, etc.

Decrease the level of judgment

• Reduce the level of judgment as much as possible. If there are nested judgments, see if the judgment conditions can be raised.

Reduce circulatory body activity