【JS】FOR循环通关只循环一次length提高性能

问题来源于jqueryAPI

原文：

Iteration

An array has a length property that is useful for iteration:

for ( var i = 0; i < a.length; i++ ) {
  // Do something with a[i]
}

When performance is critical, reading the length property only once can help to speed things up.

This should be used only when a performance bottleneck was discovered:

for ( var i = 0, j = a.length; i < j; i++ ) {
  // Do something with a[i]
}

Another variation defines a variable that is filled for each iteration, removing the array-notation from the loop-body. It does not work when the array contains 0 or empty strings!

for ( var i = 0, item; item = a[i]; i++ ) {
  // Do something with item
}

 

总共有三种循环写法，分别于chrome下累加测试：

<button onclick="test1()">开始计时1</button>
<button onclick="test2()">开始计时2</button>
<button onclick="test3()">开始计时3</button>
<script>
    var a=[],date1,date2,date;
    for(var i= 0;i<100000000;i++){
        a.push(parseInt(Math.random()*10000000)+1);
    }
    console.log(a.length);
    function test1() {
        date1=new Date().getTime();

        for(var i= 0,sum=0;i<a.length;i++){
            sum+=a[i]
        }

        date2=new Date().getTime();
        date=date2-date1;
        console.log("第一种方法"+date+"毫秒"+sum);
    }
    function test2() {
        date1=new Date().getTime();

        for(var i= 0,sum=0,item1=a.length;i<item1;i++){
            sum+=a[i]
        }

        date2=new Date().getTime();
        date=date2-date1;
        console.log("第二种方法"+date+"毫秒"+sum);
    }
    function test3() {
        date1=new Date().getTime();

        for(var i= 0,sum=0,item2;item2=a[i];i++){
            sum+=item2;
        }

        date2=new Date().getTime();
        date=date2-date1;
        console.log("第三种方法"+date+"毫秒"+sum);
    }

</script>

控制台输出结果：

第一种方法401毫秒499988949879357
第二种方法386毫秒499988949879357
第三种方法387毫秒499988949879357

第一种方法391毫秒499988949879357
第二种方法386毫秒499988949879357
第三种方法387毫秒499988949879357

第一种方法417毫秒499988949879357
第二种方法390毫秒499988949879357
第三种方法394毫秒499988949879357

后两种方法速度略快，应该是省了length获取时间；

如果把第一种i++变成i--，循环体反过来写，是不是能达到类似的效果，测试代码：

第一种方法400毫秒499988167511348
第二种方法394毫秒499988167511348
第三种方法398毫秒499988167511348
第四种方法416毫秒499988167511348

第一种方法402毫秒499988167511348
第二种方法397毫秒499988167511348
第三种方法411毫秒499988167511348
第四种方法401毫秒499988167511348

第一种方法394毫秒499988167511348
第二种方法392毫秒499988167511348
第三种方法390毫秒499988167511348
第四种方法400毫秒499988167511348

测试结果甚至与前一次测试发生了冲突，尝试扩大样本内容/循环体复杂化，提高误差，然而chrome崩溃了。

这次测试也不是毫无结果，至少如jqueryAPI原文说的，性能提升确实有限，性能达到瓶颈时可以尝试。