【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;
}
}