JavaScript性能优化-代码篇

JavaScript代码优化

1、慎用全局变量

为什么要慎用全局变量原因如下

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

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

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

2、缓存全局变量

其实就是在程序执行过程中，将使用中无法避免的全局变量缓存到局部 代码演示如下

1、普通写法：

 function getBtn1(param) {

        let oBtn1 = document.getElementById("btn1")

        let oBtn3 = document.getElementById("btn3")

        let oBtn5 = document.getElementById("btn5")

        let oBtn7 = document.getElementById("btn7")

        let oBtn9 = document.getElementById("btn9")

    }
2、优化写法：

    function getBtn2(param) {

        let obj = document

        let oBtn1 = obj.getElementById("btn1")

        let oBtn3 = obj.getElementById("btn3")

        let oBtn5 = obj.getElementById("btn5")

        let oBtn7 = obj.getElementById("btn7")

        let oBtn9 = obj.getElementById("btn9")

    }

3、通过原型增加方法

 代码演示如下
 
 1、普通写法
 
let fun1 = function () {
    
    this.foo = function (param) {
        
        console.log(11111);
    }
}

let res1 = new fun1();

2、优化写法

let fun2 = function () {
    
    fun2.prototype.foo = () => {
        
        console.log(22222);
    }
}

let res2 = new fun2();

5、避开闭包陷阱

关于闭包

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

2、闭包使用不当很容易出现内存泄漏

3、不要为了闭包而闭包

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

避免属性访问方法，这是关于面向对象相关的，首先介绍一下JavaScript中的面向对象

1、JavaScript不需属性的访问方法，所有属性都是外部可见的

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

代码演示如下 

1、不当写法

function Person(params) {

    this.name = 'loki'
    
    this.age = 20

    this.setAge = function(params) {
        return this.age
    }
}

const res3 = new Person();

const success1 = res3.setAge();

2、优化写法

function Person2(params) {
    this.name = 'handsome'
    this.age = 18;
}

const res4 = new Person();

const success2 = res4.age

7、for循环优化

在遍历数组中的数据优化性能

let arrList = [];

arrList[100000] = 'loki'

1、普通写法

for (let index = 0; index < arrList.length; index++) {

    const element = array[index];
    
    console.log(element);
}

2、优化写法

let len = arrList.length

for (let index = 0; index < len; index++) {

    const element = array[index];
    
    console.log(element)
    
}

8、采用最优循环方式

下面会列举常用的遍历数组的方式

1、forEach

arrList.forEach(element => {

    console.log(element);

});

2、for

let len = arrList.length

for (let index = 0; index < len; index++) {

    const element = array[index];

    console.log(element)

}

3、forin

for (const item in arrList) {

    if (object.hasOwnProperty(item)) {

        const element = object[item];

        console.log(element);
    }
}

如果是仅仅为了遍历数组，并不对其单个数据进行操作的话使用顺序如下

forEach  > for > for in

9、dom节点优化

在操作dom的时候，节点的添加操作必然会有回流和重绘，这两个操作对性能的影响较大

1、增加dom节点普通写法

for (let index = 0; index < 10; index++) {

    const domP = document.createElement('p');

    const element = array[index];

    domP.innerHTML = element;

    document.body.appendChild(domP)

}

2、优化写法

const fragEle = document.createDocumentFragment();

for (let index = 0; index < array.length; index++) {

    const element = array[index];

    const domP = document.createElement('p');

    domP.innerHTML = element;

    fragEle.appendChild(domP)
}

document.body.appendChild(fragEle)

10、克隆优化节点操作

1、普通写法

for (let index = 0; index < 3; index++) {

        let domP = document.createElement('p');

        domP.innerHTML = index;

        document.body.appendChild(domP)
 }
 
2、优化写法

let oldDom = document.getElementById('box1');

    for (let index = 0; index < 3; index++) {

        let newOldDomP = oldDom.cloneNode(false);

        newOldDomP.innerHTML = index
        
        document.body.appendChild(newOldDomP)

 }

11、直接量替换new object

1、问题写法

let array1 = new Array(3);

array1[0] = 1;

array1[1] = 2;

array1[2] = 3;

2、推荐写法

let array = [1, 2, 3];

以上代码均实际测试过，谢谢观看，如有不足，敬请指教