在程序猿日常的coding中，取值是一个不可避免的操作。
也许很多盆友觉得一个取值操作并没有什么可谈，其实不然。今天我将给大家展示一下，取值这一简单的操作，在性能优化上也大有可为。
首先贴一下本次测试的代码：
let type = 0,
size = 10,
arr0 = new Array(size).fill({name: 'zhangsan', sex: 'male'}),
arr1 = new Array(size).fill({name: 'zhangsan', sex: 'male'}),
sum0 = 0,
sum1 = 0;
for(let i=0; i<20;i++){
testFunc();
}
console.log(sum0)
console.log(sum1)
function testFunc() {
let time = '';
if(!type){
time = Date.now();
for(let i=0,l=arr0.length;i<l;i++){
arr0[i].name += '第一次相加';
arr0[i].name += '第二次相加';
arr0[i].name += '第三次相加';
}
sum0 += (Date.now() - time);
}else{
time = Date.now();
for(let i=0,l=arr1.length;i<l;i++){
let name = arr1[i].name;
name += '第一次相加';
name += '第二次相加';
name += '第三次相加';
}
sum1 += (Date.now() - time);
}
type = !type;
}
解释下变量的用途：
-
type：最大化保证测试的公平性，两种取值操作交替进行
-
size：测试数组大小
-
arr0、arr1：用于测试的两个数组
-
sum0、sum1：统计两组测试的总耗时长
好了，首先我们来测试下size=10的情况：
测试结果
可以看出，这个情况下基本上两者没有区别，耗时近乎0ms。
ok，现在我们再来考虑size=100的情况：
测试结果-1
测试结果-2
经过N次的刷新，可以看出，大概出现了2种结果，但是出现最多的仍然是 0 - 0这种情况。可以看出这时候两者也大概旗鼓相当，难分伯仲。
前两种情况两者性能几乎相当，接下来我们将考虑更大量级的数据，size=1000的情况：
测试结果-1
这个时候两者的性能开始有一些差距了。虽然经过N次刷新，也是出现了各种各样的数据，但总体而言，两者性能差距在2-3倍。
看到这个时候很多小伙伴还是觉得你这个优势微乎其微，没劲。
可以想象现在各位对我的态度
好吧，装逼也抵挡不了各位看官对我的鄙视，那接下来给大家看看10倍的性能差距。
我们只需轻轻的将size设置为10000，然后随便一刷浏览器：
测试结果
怎么样，小老弟
看到这里想必各位被强行打成共识的看官都怒了，你这***数据量谁玩啊？
但是我们想想，前端数据可视化想必各位也不陌生，数据量达到w级的可不在少数。当然也有其他使用场景，我们不必深究。
下面再贴几张其他数量级的测试结果：
size=100000的测试结果
size=1000000的测试结果
各位可能会惊讶，下一量级的测试数据呢？我为什么不贴，我是不会告诉你的。
size=10000000的测试结果
不管怎么样，可以看出数据量级越大，优势就越明显（请忽略被type0搞崩溃了的size=10000000）。
不死心的我单独测试了一下size=10000000时type1的结果，结果挺欣慰（手动痛哭流涕）：
size=10000000 type1的测试结果
接下来，简单分析一下出现这种情况的原因。
两种代码唯一的区别在于type0多次从arr上取同一属性值，而type1每次循环只取值一次，同时记录在作用域内成为局部变量，下一次用到时将不再从arr上寻找，直接使用域内的变量。可以预见，如果type0中出现更多对arr同一属性的取值操作，两者的性能差距也将会更大。
本次测试就到这里，如有疏忽错误之处欢迎大家指正。
同时也希望更多的小伙伴（共勉.jpg）注意日常的coding，早日写出优雅简洁，性能强大的前端代码。
共勉
网友评论