JS 性能优化小记

【JS语法层面的性能优化】

先看一个2万次的遍历性能开销图（Chrome 版本 83.0.4103.61（正式版本） （64 位））

发现了什么？同样是forEach 执行效率截然不同，所以不能简单的对比 for for...of forEach 性能上的差异，理所当然的认为性能开销所差无几，建议使用for 循环 不建议使用forEach ,因为forEach在不同语境表现性能表现差异极大

此外Array.prototype.includes() 方法明显的有性能问题，数据量大量时不建议使用，

如果你觉得只是230ms的开销不足为惧，下面再看不当的使用更惊人的性能开销数据（19891次遍历）

下面是性能优化后的开销

 

【结语】

JS 原生方法的性能开销问题不能简单的对比，不同的使用场景性能开销差异巨大，在数据量较多时，不建议使用forEach includes 方法， for 循环遍历依然是可靠极具效率

let temp = [];
    let filter = [];
    let i = 20000;
    for (; i--;) {
        temp.push(Math.random())
        filter.push(Math.random())
    }

    function handleClick() {
        let x = [];
        let map = {};
        for (let len = filter.length; len--;) {
            map[filter[len]] = true
        }
        temp.forEach((v) => {
            filter[v] ? x.push(v) : 1;
        })
        for (let len = temp.length; len--;) {
            filter[temp[len]] ? x.push(temp[len]) : 1;
        }

        temp.forEach((v) => {
            filter.includes(v) ? x.push(v) : 1;
        })
        temp.forEach((v) => {
            3 > 4 ? x.push(2) : 3
        })
        for (let v of temp) {
            filter.includes(v) ? x.push(v) : 1;
        }
        for (let v of temp) {
            filter[v] ? x.push(v) : 1;
        }

        for (let len = temp.length; len--;) {
            filter.includes(temp[len]) ? x.push(x) : 1;
        }
    }