最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • 高效的Javascript循环语句要这么优化

    正文概述 掘金(前端修罗场)   2021-03-20   431

    高效的Javascript循环语句要这么优化 当涉及到循环性能时,争论始终是关于使用哪个循环。 哪个是最快,最高效的? 事实是,在JavaScript提供的四种循环类型中,只有一种比for-in循环要慢得多。 循环类型的选择应基于您的要求而不是性能方面的考虑。

    影响循环性能的主要因素有两个:每次迭代完成的工作和迭代次数。

    在下面的部分中,我们将看到通过减少它们如何对循环性能产生积极的总体影响。

    For

    这可能是最常用的JavaScript循环构造。 要了解如何优化其工作,我们需要对其进行剖析。

    for (var i = 0; i < 10; i++){    //loop body}
    

    for循环包括四个部分:初始化,预测试条件,循环主体和后执行。 它的工作方式如下:首先,执行初始化代码(var i = 0;)。 然后是预测试条件(i <10;)。 如果预测试条件评估为true,则执行循环主体。 之后,运行后执行代码(i ++)。

    优化

    优化循环工作量的第一步是最大程度地减少对象成员和数组项查找的数量。

    您还可以通过颠倒顺序来提高循环的性能。 在JavaScript中,如果您消除了多余的操作,则反转循环的确会导致循环性能稍有改善。

    // original loop
    for (var i = 0; i < items.length; i++){
        process(items[i]);
    }
    // minimizing property lookups
    for (var i = 0, len = items.length; i < len; i++){
        process(items[i]);
    }
    // minimizing property lookups and reversing
    for (var i = items.length; i--; ){
        process(items[i]);
    }
    

    While

    第二种循环是while循环。 这是一个简单的预测试循环,由一个预测试条件和一个循环主体组成。

    var i = 0;
    while(i < 10){
        //loop body
        i++;
    }
    

    优化

    // original loop
    var j = 0;
    while (j < items.length){
        process(items[j++]);
    }
    // minimizing property lookups
    var j = 0,
    	count = items.length;
    while (j < count){
        process(items[j++]);
    }
    // minimizing property lookups and reversing
    var j = items.length;
    while (j--){
        process(items[j]);
    }
    

    Do-While

    do-while是第三种循环,它是JavaScript中唯一的测试后循环。 它由循环体和测试后条件组成:

    var i = 0;
    do {
        //loop body
    } while (i++ < 10);
    

    优化

    // original loop
    var k = 0;
    do {
        process(items[k++]);
    } while (k < items.length);
    // minimizing property lookups
    var k = 0,
        num = items.length;
    do {
        process(items[k++]);
    } while (k < num);
    // minimizing property lookups and reversing
    var k = items.length - 1;
    do {
        process(items[k]);
    } while (k--);
    

    For-In

    第四种和最后一种循环类型称为循环循环。 它有一个非常特殊的用途-枚举任何JavaScript对象的命名属性。

    for (var prop in object){
        //loop body
    }
    

    它的名称类似于常规的for循环。 它的工作方式完全不同。 而且,这种差异使它比其他三个循环都慢得多,其他三个循环具有相同的性能特征,因此无法尝试确定哪个循环最快。

    每次执行循环时,变量prop都会在对象上具有另一个属性的名称,即字符串。 它将执行直到所有属性都返回。 这些将是对象本身的属性,以及通过其原型链继承的属性。

    Tips

    不应使用“ for-in”来遍历数组的成员。

    通过此循环的每次迭代都会在实例或原型上进行属性查找,这使得for-in循环比其他循环慢得多。 对于相同数量的迭代,它可能比其余的慢七倍。

    结论

    for,while和do-while循环都具有相似的性能特征,因此没有一种循环类型比其他循环类型显着更快或更慢。 除非需要遍历许多未知对象属性,否则请避免for-in循环

    改善循环性能的最好方法是减少每次迭代完成的工作量并减少循环迭代的次数。


    起源地下载网 » 高效的Javascript循环语句要这么优化

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元