乐鱼电竞



教育行业A股IPO第一股（股票代码 003032）

全国咨询/投诉热线：400-618-4000

web前端开发培训之谈一谈循环的性能提升

更新时间:2016年10月12日14时40分 来源:乐鱼播客前端与移动开发学院 浏览次数:

循环在任何编程语言中都会大量的使用，在JS中也不例外。对于JS来说，循环也有其特殊之处，这边笔记主要写的是JS中性能提升。

·首先要来和大家统一一下概念，下面是for循环的基本概念

for循环按照如下顺序执行：①→②→③→④→②→③→④
所以大家可以看到①循环初始化语句只执行一次，而其他三步每次循环都执行。

·接下来可以从四方面入手，来进行性能优化

①递减迭代
正如上面图片所示，大多数情况，开发者喜欢递增的方式进行迭代，即从0开始增加到某个特定值为止。而事实上，递减的迭代会更高效。

②简化循环条件语句
循环条件语句再每次循环都进行运算，所以要尽量是其精简。
先举一个反例

  1.     for(var i = 0; i < document.images.length; i++){
  2.         //处理document.images[i]
  3.       
  4.     }

在这个例子中，由于循环条件语句每次循环都执行，所以他每次都会进行一次document.images的遍历，而通常DOM操作是非�：氖钡�。
我们可以尝试做下面的优化：

  1.     for(var i = 0, len = document.images.length; i < len ; i++){
  2.         //处理document.images[i]
  3.       
  4.     }

把循环条件语句中的DOM访问结果缓存历来，这样整个循环只会访问一次DOM了，大大提升了性能。

在所有的浏览器中，通过将HTML容器上需要遍历的次数缓存起来都会大大提升速度。其中在Safari 3中速度会提高两倍，而在IE7中速度会提高170倍

③简化循环体
循环体是执行最多的，所以要确保其被最大限度地优化。应该尽量移除哪些密集的计算。

④合并循环条件和更新语句

  1. var i, someArray = [];
  2. for(i = someArray.length; i--;){
  3.     //处理someArray[i]
  4. }

上面的代码中，将循环用到的变量声明都提前，这样可以提升一部分效率；条件语句为i--，这样使得i同0比较，而不是与数组的长度比较，这样也挺高了效率；
此外还去除了更新语句。


（文章转载于：前端网）


本文版权归乐鱼播客web前端开发培训学院所有，欢迎转载，转载请注明作者出处，谢谢！
作者：乐鱼播客web前端开发培训学院
首发：http://www.itcast.cn/web/
0 分享到：
和我们在线交谈！
【网站地图】【sitemap】