JS性能优化策略

JS性能优化策略

一、减少不必要的全局变量使用

​ 为什么要尽量少使用全局变量呢？

1. 全局变量定义在全局执行上下文，是所有作用域链的顶端，从下向上根据作用域链查找的时间损耗是比较大的，代码执行效率相对是比较低的。
2. 全局执行上下文一直存在于上下文执行栈，直到程序退出才会被释放，不利于GC进行垃圾回收。

因此，在能用局部变量解决的地方，就用局部变量

验证一下：

let i , str = ""
function packageDom(){
    console.time('使用全局变量')
    for( i = 0; i < 1000 ; i++){
        str += i
    }
    console.timeEnd('使用全局变量')
}
packageDom()


function packageDom_(){
    console.time('使用局部变量')
    let str = ""
    for( let i = 0; i < 1000 ; i++){
        str += i
    }
    // console.log(str)
    console.timeEnd("使用局部变量")
}
packageDom_()

两个函数的执行结果：

可以发现：使用局部变量会比使用全局变量更加高效

二、局部作用域中进行数据缓存

将 需要多次使用的计算结果 自身作用域之外的变量 需要去获取的内容在自身作用域进行缓存，需要多次使用时直接使用缓存内容即可

三、减少判断层级

1、使用if … else … 进行多层级判断时提前return掉不符合要求的情况

2、在多个else…if 且条件清晰的情况下使用switch…case…代替

四、减少循环体操作

for循环中条件尽量不要进行运算，将运算结果(固定不会变的)在循环体外进行

五、变量声明方式

声明变量的方式有字面量与构造函数，两者执行效率是否有区别？

对于引用数据类型：

构造函数声明一个对象：

let test = () => {
  let obj = new Object()
  obj.name = "zoe"
  obj.age = 28
  obj.location = 'China'
  return obj
}
console.log(test())

字面量声明对象：

let test = () => {
  let obj = {
    name:'zoe',
    age:18,
    location:'China'
  }
  return obj
}
console.log(test())

看下效率对比：

对于基本数据类型：

可以看出，在创建引用数据类型时，两者是差不多的，字面量稍快一点，而对于基本数据类型，字面量明显快于构造函数，因此，在创建变量时尽可能的去使用字面量创建

六、函数的防抖与节流：

下节见：防抖与节流