学习九、JS性能代码优化概述

JS性能测试：使用基于Benchmark.js的 http://jsperf.com/ 完成

本质上就是采集大量的执行样本进行数学统计和分析

使用方法:

1) 使用Github登录

2) 填写个人信息（可选）

3) 填写详细的测试用例信息（title、slug）

4) 准备填写代码（DOM操作时经常使用）

5) 填写必要的setup与teardown代码

6) 填写测试代码片段

一、慎用全局变量

为什么要慎用全局变量

1、全局变量定义在全局执行上下文，是所有作用域的顶端

2、全局执行上下文一直存在于上下文执行栈，直到程序退出

3、如果某个局部作用域出现了同名变量则会遮蔽或污染全局

二、缓存全局变量

将使用中无法避免的全局变量缓存到局部

三、通过原型对象添加附加方法

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()

在原型对象上新增的实例对象需要的方法

四、避开闭包陷阱

1、闭包特点：

1) 外部具有指向内部的引用

2) 在外部作用域访问内部作用域的数据

2、关于闭包：

1) 闭包是一种强大的语法

2) 闭包使用不当很容易出现内容泄露

3) 不要为了闭包而闭包

3、ex:function foo(){

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

el.onclick = function(){

console.log(el.id)

}

el = null //解决闭包陷阱;

}

五、避免属性访问方法使用

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不需要属性的访问方法，所有属性都是外部可见的

2、使用属性访问方法只会增加一层定义，没有访问的控制力。

六、For循环优化

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])
}

七、采用最优循环方式

forEach()最优，for其次，for...in最差

八、文档碎片优化节点添加

<!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>

九、克隆优化节点操作

<!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>

十、字面量替换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

学习九、JS性能代码优化概述

猜你喜欢