美文网首页
浅谈性能优化之----被你忽视了的取值操作

浅谈性能优化之----被你忽视了的取值操作

作者: 暮色弦月凄凉 | 来源:发表于2019-05-06 18:25 被阅读0次
在程序猿日常的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,早日写出优雅简洁,性能强大的前端代码。


共勉

相关文章

网友评论

      本文标题:浅谈性能优化之----被你忽视了的取值操作

      本文链接:https://www.haomeiwen.com/subject/acuroqtx.html