JavaScript性能优化具体实现-第二篇

前言

在之前的文章中介绍了代码的编写方式，在本篇文章中将继续介绍更多的性能优化小技巧

循环优化

循环主要是用来遍历数据，遍历数据又比较浪费性能，我这里呢有一些小技巧供大家参考

//普通写法

const arr2 = [1, 2, 3, 6, 9, 5, 4];

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

    console.log(arr2[index]);
}

//优化写法

const arr = [1, 2, 3, 6, 9, 5, 4];

let index; //提前声明index

let len = arr.length //提前保存数组的长度

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

    console.log(index);
    
}

//不考虑顺序的前提下，使用while循环代替for循环

const arr = [1, 2, 3, 6, 9, 5, 4];

let len = arr.length //保存数组的长度

while (len--) {

    console.log(arr[len]);
	//result=> 输出顺序相反	
}

减少声明和语句

//普通写法 普通写法有一个好处，代码更便于阅读，也更好地维护

const arr3 = () => {

    let a = 1;

    let b = 3;

    let c = 4;

    log(a + b + c)
    
};

arr3()//reult => 8

//优化写法

const arr3 = () => {

    let a = 1,

        b = 3,

        c = 4;

    log(a + b + c)

};

arr3();//reult => 8

惰性函数的使用

//模拟函数

function addEvent(obj, type, fn) {

    if (obj.addEventListener) {
    
        obj.addEventListener(obj, type, false)
        
    } else if (obj.attachEvent) {
    
        obj.attachEvent('on' + type, fn)
        
    } else {
    
        obj['on' + type] = fn
        
    }
}

//改造成惰性函数 单次调用性能损失较小 多次调用的话 性能损失较大 还是要根据实际情况使用

function addEvent(obj, type, fn) {

    if (obj.addEventListener) {
    
        addEvent = obj.addEventListener(obj, type, false)
        
    } else if (obj.attachEvent) {
    
        addEvent = obj.attachEvent('on' + type, fn)
        
    } else {
    
        addEvent = obj['on' + type] = fn
        
    }

    return addEvent
}

事件委托

//事件委托的本质就是利用js的冒泡机制，本来应该给子元素添加的事件，

//实际上给父元素添加事件，通过冒泡机制让子元素执行并且绑定

举例

//普通写法
    function showText(event) {

        console.log(event.target.innerHTML)
    }
    let list = document.querySelectorAll('li');
    for (const item of list) {
        item.onclick = showText
    }

//优化写法
    let list = document.querySelectorAll('li');

    let oul = document.getElementById('ul');

    oul.addEventListener('click', showText, true);

    function showText(event) {

        let obj = event.target

        if (obj.nodeName.toLowerCase() === "li") {

            console.log(obj.innerHTML)

        }

    }

谢谢观看，如有不足，敬请指教