JS performance optimization

Name = 'lg' // Free space obj = nullCopy the code

• Accessible objects are reachable objects (references, scope chains)
• The criterion of reachability is whether it can be found from the root
• Roots in JS can be thought of as global variable objects

Find the garbage and let the JS engine free and recycle the space

Core idea: Set the number of references. Checks whether the current number of references is 0

Reference counter:

Modify the reference number when the reference relationship changes

Reclaim immediately if the reference number is 0

const user1 = {age: 11}
const user2 = {age: 12}
const user3 = {age: 13}

const namelist = [user1.age, user2.age, user3.age]

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

Advantages: Recycle garbage immediately when it is found, minimizing program pauses

Disadvantages: Unable to recycle referenced objects, time overhead

function fn() {
    const obj1 = {}
    const obj2 = {}
    obj1.name = obj2
    obj2.name = obj1
    return 'zxt'
}

fn()
Copy the code

Think of it as an enhancement to tag clearing

The operation of the tag phase is the same as that of tag clearing

The cleanup phase starts with a cleanup, moving the object

Advantages: Reduced fragmentation space

Disadvantages: Garbage objects are not immediately recycled

• Adopt the idea of generational recycling

• Memory is divided into new generation, old generation

• Different algorithms are used for different objects

  V8 commonly used GC algorithm: generational recycling, space replication, mark clearing, mark collation, mark enhancement

• The old generation object is placed in the old generation area on the right

• 64-bit OPERATING system 1.4 GB, 32-bit operating system 700 MB

• An old generation object is an object that lives for a long time

  implementation

  • It mainly adopts the algorithm of mark clearing, mark finishing and increment mark
  • Garbage space is first collected using a tag sweep
  • Spatial optimization was carried out by label finishing

  Details of the contrast

  • The new generation of regional garbage recycling uses space exchange time
  • Old-generation area garbage collection is not suitable for replication algorithms

The separation of the DOM

1. Interface elements live in the DOM
2. Dom node when garbage object
3. Separate state DOM nodes

• Global variables are defined in the global execution context and are at the top of any scope chain
• The global execution context remains in the context execution stack until the program exits
• The presence of a variable with the same name in a local scope obscures or contaminates the whole world

var fn1 = function () {
    this.foo = function () {
        console.log(1111)
    }
}
fn1 = new fn1()

var fn2 = function () {}
fn2.prototype.foo = function () {
    console.log(1111)
}
fn2 = new fn2()
Copy the code

• JS does not require attribute access methods, all attributes are externally visible
• Using attribute access methods only adds another layer of redefinition, with no access control

function Person() {
    this.name = 'zs'
    this.age = 18
    this.getAge = function () {
        return this.age
    }
}
const p1 = new Person()
const a = p1.getAge()

function Person() {
    this.name = 'zs'
    this.age = 18
}
const p2 = new Person()
const b = p2.age
Copy the code

Var arr = new Array(1, 2, 3, 4, 5); var arr. ForEach (item => {console.log(item)}); len = arr.length; i < len ; i++) { console.log(arr[i]) } for (var i in arr) { console.log(arr[i]) }Copy the code

for (var i = 0; i < 3; I++) {var oP = document. The createElement method (' p ') oP. InnerHTML = I document. The body. The appendChild (oP)} / / optimal var oP = document.createElement('p') for (var i = 0; i < 3; i++) { var newP = oldP.cloneNode(false) oP.innerHTML = i document.body.appendChild(oP) }Copy the code