Study Nine, Overview of JS performance code optimization

JS performance test: complete with http://jsperf.com/ based on Benchmark.js

Essentially, collecting a large number of execution samples for mathematical statistics and analysis

Instructions:

1) Log in with Github

2) Fill in personal information (optional)

3) Fill in the detailed test case information (title, slug)

4) Prepare to fill in the code (usually used in DOM operations)

5) Fill in the necessary setup and teardown codes

6) Fill in the test code snippet

1. Use global variables with caution

Why use global variables with caution

1. Global variables are defined in the global execution context, which is the top of all scopes

2. The global execution context always exists in the context execution stack until the program exits

3. If a variable with the same name appears in a local scope, it will obscure or pollute the global

Two, cache global variables

Cache local variables that cannot be avoided in use

Three, add additional methods through the prototype object

let fn1 = function () {
    this.foo = function () {
        console.log(11111)
    }
}

let f1 = new fn1()


let fn2 = function () {}
fn2.prototype.foo = function () {
    console.log(11111)
}

let f2 = new fn2()

The methods required by the new instance object on the prototype object

Four, avoid the closure trap

1. Closure features:

1) The outside has a reference to the inside

2) Access the data of the inner scope in the outer scope

2. About closures:

1) Closures are a powerful syntax

2) Improper use of closures is prone to content leakage

3) Don't close for the sake of closure

3、ex:function foo(){

let el = document.getElementById("btn");

el.onclick = function(){

console.log(el.id)

}

el = null // solve the closure trap;

}

Five, avoid the use of attribute access methods

function Person() {
    this.name = 'icoder'
    this.age = 18
    this.getAge = function () {
        return this.age
    }
}

const p1 = new Person()
const a = p1.getAge()

function Person() {
    this.name = 'icoder'
    this.age = 18
}
const p2 = new Person()
const b = p2.age

1. JS does not require attribute access methods, all attributes are externally visible

2. Using attribute access methods will only add a layer of definition, without access control.

Six, For loop optimization

let arrList = []
arrList[10000] = 'icoder'

for (let i = 0; i < arrList.length; i++) {
    console.log(arrList[i])
}

for (let i = arrList.length; i; i--) {
    console.log(arrList[i])
}

Seven, adopt the optimal circulation method

forEach() is the best, for second, for...in is the worst

8. Document fragmentation optimization node added

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>优化节点添加</title>
</head>
<body>
  <script>

    for (let i = 0; i < 10; i++) {
      let oP = document.createElement('p')
      oP.innerHTML = i 
      document.body.appendChild(oP)
    }

    const fragEle = document.createDocumentFragment()  //创建一个文档碎片
    for (let i = 0; i < 10; i++) {
      let oP = document.createElement('p')
      oP.innerHTML = i 
      fragEle.appendChild(oP)
    }

    document.body.appendChild(fragEle)

  </script>
</body>
</html>

Nine, clone optimized node operation

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>克隆优化节点操作</title>
</head>
<body>
  <p id="box1">old</p>

  <script>

    for (let i = 0; i < 3; i++) {
      let oP = document.createElement('p')
      oP.innerHTML = i 
      document.body.appendChild(oP)
    }

    let oldP = document.getElementById('box1')
    for (let i = 0; i < 3; i++) {
      let newP = oldP.cloneNode(false) //这里传入false表示只克隆当前节点，true为克隆当前以及其所有子节点。
      newP.innerHTML = i 
      document.body.appendChild(newP)
    }

  </script>

</body>
</html>

10. Literal replacement of new Object code-04/app07.html

let a1 = [1, 2, 3]

let a2 = new Array(1,2,3)

let a3 = new Array(3)
a3[0] = 1
a3[1] = 2
a3[2] = 3

Study Nine, Overview of JS performance code optimization

Guess you like