JS之for循环优化

众所周知Js中的循环大致可以分为4中: 
1.for循环 
Javascript代码   收藏代码
  1. for(var i=0;i<10;i++){  
  2.   //循环主题  
  3. }  

其中for循环是最常见的循环结构,由四部分组成:初始化、前测条件、后执行体、循环体。当代码运行遇到for循环时,先运行初始化代码,然后进入前侧条件。如果前侧条件为true,则运行循环体。循环体执行完后,后执行代码开始运行。 
2. while 循环  
while循环是最简单的前测循环,有一个前测条件和一个循环体构成: 
Javascript代码   收藏代码
  1. var  i = 0;  
  2. while(i < 10){  
  3.    //循环主题  
  4.    i++;  
  5. }  

3. do..while循环  
do-while 循环是js中唯一一种后测循环,由两部分组成,循环体和后测条件 
Javascript代码   收藏代码
  1. var i = 0;  
  2. do{  
  3.     //循环体  
  4. }while(i++ < 10)  

在do-while中至少会执行一次循环体 
4 for-in循环 
该循环有一个特别的用途:可以枚举任何对象的属性名。 
Javascript代码   收藏代码
  1. for(var prop in object){  
  2.    //循环体  
  3. }  

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

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

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

减少迭代的工作量 
很明显,如果一次循环迭代要花很长时间去执行,那么多次循环需要花更多的时间。一个提升循环整体速度的好方法就是限制循环中耗时的操作数量。 
一个典型的数组处理循环可以采用三种循环中的任何一种。最常见的写法如下: 
Javascript代码   收藏代码
  1. for(var i = 0; i < items.length; i++){  
  2.     process(items[i]);  
  3. }  
  4.   
  5. var j = 0;  
  6. while(j < items.length){  
  7.     process(items[j]);  
  8. }  
  9.   
  10. var k = 0;  
  11. do{  
  12.    process(items[k]);  
  13. }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,这样做很耗时,由于该值在循环运行过程中从未变过,因此产生了不必要的性能损失,提高整个循环的性能很简单,只查找一次属性,并把值存储到一个局部变量中,然后在控制条件中使用整个变量 
Javascript代码   收藏代码
  1. for(var i = 0,len = item.length; i < len; i++){  
  2.     process(items[i]);  
  3. }  
  4.   
  5. var j = 0,  
  6.     len = items.length;  
  7. while(j < len ){  
  8.     process(items[j]);  
  9. }  
  10.   
  11. var k = 0,  
  12.     num = items.length;  
  13. do{  
  14.    process(items[k]);  
  15. }while(k < num);  


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

减少迭代次数 
   
   即使是循环体中最快的代码,累计迭代上千次也会慢下来。此外,循环体运行时也会带来小性能开销,不仅仅是增加总体运行时间。减少迭代次数能获得更加显著的性能提升。下面介绍一种广为人知的限制循环迭代次数的模式被称为“达夫设备(Duff's Device)”: 
   Duff's Device 是一个循环体展开技术,使得一次迭代实际执行了多次迭代的操作 
  
Javascript代码   收藏代码
  1. var iterations = Math.floor(items.length/8),  
  2.     startAt = items.length%8,  
  3.     i = 0;  
  4. do{  
  5.     switch(startAt){  
  6.         case 0 : process(items[i++]);  
  7.         case 7 : process(items[i++]);  
  8.         case 6 : process(items[i++]);  
  9.         case 5 : process(items[i++]);  
  10.         case 4 : process(items[i++]);  
  11.         case 3 : process(items[i++]);  
  12.         case 2 : process(items[i++]);  
  13.         case 1 : process(items[i++]);  
  14.     }  
  15.     startAt =  0;  
  16.  }while(--iterations);  
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值