Js性能优化--循环体优化

最近一直在看js相关资料，看到一些关于如何提高js性能方面的资料，故和大家分享下：
众所周知Js中的循环大致可以分为4中：
1.for循环

   for(var i=0;i<10;i++){
     //循环主题
   }

其中for循环是最常见的循环结构，由四部分组成：初始化、前测条件、后执行体、循环体。当代码运行遇到for循环时，先运行初始化代码，然后进入前侧条件。如果前侧条件为true，则运行循环体。循环体执行完后，后执行代码开始运行。
2. while 循环 
while循环是最简单的前测循环，有一个前测条件和一个循环体构成：

   var  i = 0;
   while(i < 10){
      //循环主题
      i++;
   }

3. do..while循环 
do-while 循环是js中唯一一种后测循环，由两部分组成，循环体和后测条件

    var i = 0;
    do{
        //循环体
    }while(i++ < 10)

在do-while中至少会执行一次循环体
4 for-in循环
该循环有一个特别的用途：可以枚举任何对象的属性名。

    for(var prop in object){
       //循环体
    }

循环体每次运行时，prop变量被赋值为object的一个属性名，直到所有属性遍历完成才返回。所返回的属性包括对象实例属性和从原型链中继承而来的属性

以后对4中循环进行了大致的介绍，接下来说说如何在进行相关系能提升
4中循环类型中，只有for-in循环比其他几种明显要慢：主要原因在于每次迭代操作会同时搜索实例或原型属性，每次迭代都会产生更多开销。

如果循环类型与性能无关，可以从以下两个可选因素来提高整体性能
1.每次迭代处理的事务
2.迭代的次数

减少迭代的工作量
很明显，如果一次循环迭代要花很长时间去执行，那么多次循环需要花更多的时间。一个提升循环整体速度的好方法就是限制循环中耗时的操作数量。
一个典型的数组处理循环可以采用三种循环中的任何一种。最常见的写法如下：

   for(var i = 0; i < items.length; i++){
       process(items[i]);
   }
  
   var j = 0;
   while(j < items.length){
       process(items[j]);
   }

   var k = 0;
   do{
      process(items[k]);
   }while(k < items.length);
 

   上面的每个循环中，每次进行循环体时都会产生如下操作：
   1. 一次控制条件中的属性查找（items.length）
   2. 一次控制条件中的数值大小的比较（i<items.length）
   3. 一次控制条件结果是否为true的比较（i<items.length == true）
   4. 一次自增操作（i++）
   5. 一次数组查找（items[i]）
   6. 一次函数调用（ process(items[j]);）

   这些简单循环中，尽管代码不多，但每次迭代都要进行许多操作。代码运行速度很大晨读上取决于函数process()对每个数组项的操作，尽管如此，减少每次迭代中的操作能大幅提高循环的整体性能。
   优化循环的第一步就是减少对象成员及数组项的查找次数。前面例子中每次循环都要查找items.length，这样做很耗时，由于该值在循环运行过程中从未变过，因此产生了不必要的性能损失，提高整个循环的性能很简单，只查找一次属性，并把值存储到一个局部变量中，然后在控制条件中使用整个变量

   for(var i = 0,len = item.length; i < len; i++){
       process(items[i]);
   }
  
   var j = 0,
       len = items.length;
   while(j < len ){
       process(items[j]);
   }

   var k = 0,
       num = items.length;
   do{
      process(items[k]);
   }while(k < num);
 

   还可以通过倒序循环来进行。

减少迭代次数
  
   即使是循环体中最快的代码，累计迭代上千次也会慢下来。此外，循环体运行时也会带来小性能开销，不仅仅是增加总体运行时间。减少迭代次数能获得更加显著的性能提升。下面介绍一种广为人知的限制循环迭代次数的模式被称为“达夫设备（Duff's Device）”:
   Duff's Device 是一个循环体展开技术，使得一次迭代实际执行了多次迭代的操作
  

   var iterations = Math.floor(items.length/8),
       startAt = items.length%8,
       i = 0;
   do{
       switch(startAt){
           case 0 : process(items[i++]);
           case 7 : process(items[i++]);
           case 6 : process(items[i++]);
           case 5 : process(items[i++]);
           case 4 : process(items[i++]);
           case 3 : process(items[i++]);
           case 2 : process(items[i++]);
           case 1 : process(items[i++]);
       }
       startAt =  0;
    }while(--iterations);