JavaScript之循环性能影响

 在大多数编程语言中，代码执行时间多数在循环中度过。在一系列编程模式中，循环是最常用的模式之一，因此也是提高性能必须关注的地区之一。理解JavaScript中循环对性能的影响至关重要，因为死循环或者长时间运行的循环会严重影响用户体验。
      一、循环的类型
      ECMA-263标准第三版规定了JavaScript的基本语法和行为，定义了四种类型的循环。第一个是标准的for循环，与类C语言使用同样的语法：
      for (var i=0; i < 10; i++){
            //loop body
      }
      for循环大概是最常用的JavaScript 循环结构。它由四部分组成：初始化体，前测条件，后执行体，循环体。当遇到一个for 循环时，初始化体首先执行，然后进入前测条件。如果前测条件的计算结果为true，则执行循环体。然后运行后执行体。for 循环封装上的直接性是开发者喜欢的原因。
      第二种循环是while 循环。while 循环是一个简单的预测试循环，由一个预测试条件和一个循环体构成：

      var i = 0;
      while(i < 10){
            //loop body
            i++;
      }
      在循环体执行之前，首先对前测条件进行计算。如果计算结果为true，那么就执行循环体；否则循环体将被跳过。任何for 循环都可以写成while 循环，反之亦然。
      第三种循环类型是do-while 循环。do-while 循环是JavaScript 中唯一一种后测试的循环，它包括两部分：循环体和后测试条件体：
      var i = 0;
      do {
            //loop body
      } while (i++ < 10);
      在一个do-while 循环中，循环体至少运行一次，后测试条件决定循环体是否应再次执行。
      第四种也是最后一种循环称为for-in 循环。此循环有一个非常特殊的用途：它可以枚举任何对象的命名属性。其基本格式如下：
      for (var prop in object){
            //loop body
      }
      每次循环执行，属性变量被填充以对象属性的名字（一个字符串），直到所有的对象属性遍历完成才返回。返回的属性包括对象的实例属性和它从原型链继承而来的属性。
      二、循环性能
      循环性能争论的源头是应当选用哪种循环。在JavaScript 提供的四种循环类型中，只有一种循环比其他循环明显要慢：for-in 循环。
      由于每次迭代操作要搜索实例或原形的属性，for-in 循环每次迭代都要付出更多开销，所以比其他类型循环慢一些。在同样的循环迭代操作中，for-in 循环比其他类型的循环慢7 倍之多。因此推荐的做法如下：除非你需要对数目不详的对象属性进行操作，否则避免使用for-in 循环。如果你迭代遍历一个有限的，已知的属性列表，使用其他循环类型更快，可使用如下模式：
      var props = ["prop1", "prop2"],
      i = 0;
      while (i < props.length){
            process(object[props[i]]);
      }
      此代码创建一个由成员和属性名构成的队列。while 循环用于遍历这几个属性并处理所对应的对象成员，而不是遍历对象的每个属性。此代码只关注感兴趣的属性，节约了循环时间。
      除for-in 循环外，其他循环类型性能相当，难以确定哪种循环更快。选择循环类型应基于需求而不是性能。
      如果循环类型与性能无关，那么如何选择？其实只有两个因素：每次迭代干什么；迭代的次数
      通过减少这两者中一个或者全部（的执行时间），你可以积极地影响循环的整体性能。减少迭代的工作量
      不言而喻，如果一次循环迭代需要较长时间来执行，那么多次循环将需要更长时间。限制在循环体内进
行耗时操作的数量是一个加快循环的好方法。
      一个典型的数组处理循环，可使用三种循环的任何一种。最常用的代码写法如下：
      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[i])）
      在这些简单的循环中，即使没有太多的代码，每次迭代也要进行许多操作。代码运行速度很大程度上由process()对每个项目的操作所决定，即使如此，减少每次迭代中操作的总数可以大幅度提高循环整体性能。
      优化循环工作量的第一步是减少对象成员和数组项查找的次数。在大多数浏览器上，这些操作比访问局部变量或直接量需要更长时间。前面的例子中每次循环都查找items.length。这是一种浪费，因为该值在循环体执行过程中不会改变，因此产生了不必要的性能损失。你可以简单地将此值存入一个局部变量中，在控制条件中使用这个局部变量，从而提高了循环性能：
      for (var i=0, len=items.length; i < len; i++){
            process(items[i]);
      }
      var j=0,
      count = items.length;
      while (j < count){
            process(items[j++]]);
      }
      var k=0,
      num = items.length;
      do {
            process(items[k++]);
      } while (k < num);
      这些重写后的循环只在循环执行之前对数组长度进行一次属性查询。这使得控制条件只有局部变量参与运算，所以速度更快。根据数组的长度，在大多数浏览器上你可以节省大约25%的总循环时间（在InternetExplorer可节省50%）。
      你还可以通过改变他们的顺序提高循环性能。通常，数组元素的处理顺序与任务无关，你可以从最后一个开始，直到处理完第一个元素。倒序循环是编程语言中常用的性能优化方法，但一般来说不太容易理解。在JavaScript中，倒序循环可以略微提高循环性能，只要你消除因此而产生的额外操作：
      for (var i=items.length; i–; ){
            process(items[i]);
      }
      var j = items.length;
      while (j–){
            process(items[j]]);
      }
      var k = items.length-1;
      do {
            process(items[k]);
      } while (k–);
      例子中使用了倒序循环，并在控制条件中使用了减法。每个控制条件只是简单地与零进行比较。控制条件与true 值进行比较，任何非零数字自动强制转换为true，而零等同于false。实际上，控制条件已经从两次比较（迭代少于总数吗？它等于true 吗？）减少到一次比较（它等于true 吗？）。将每个迭代中两次比较减少到一次可以大幅度提高循环速度。通过倒序循环和最小化属性查询，你可以看到执行速度比原始版本快了50%-60%。与原始版本相比，每次迭代中只进行如下操作：
      1. 在控制条件中进行一次比较（i == true）
      2. 一次减法操作（i–）
      3.一次数组查询（items[i]）
      4. 一次函数调用（process(items[i])）
      新循环代码每次迭代中减少两个操作，随着迭代次数的增长，性能将显著提升。
      即使循环体中最快的代码，累计迭代上千次（也将是不小的负担）。此外，每次运行循环体时都会产生一个很小的性能开销，也会增加总的运行时间。减少循环的迭代次数可获得显著的性能提升。最广为人知的限制循环迭代次数的模式称作“达夫设备”。
      达夫设备是一个循环体展开技术，在一次迭代中实际上执行了多次迭代操作。Jeff Greenberg 被认为是将达夫循环从原始的C 实现移植到JavaScript 中的第一人。一个典型的实现如下：
      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);
      达夫设备背后的基本理念是：每次循环中最多可8次调用process()函数。循环迭代次数为元素总数除以8。因为总数不一定是8 的整数倍，所以startAt变量存放余数，指出第一次循环中应当执行多少次process()。比方说现在有12个元素，那么第一次循环将调用process()4次，第二次循环调用process()8次，用2次循环代替了12 次循环。
      此算法一个稍快的版本取消了switch 表达式，将余数处理与主循环分开：
      var i = items.length % 8;
      while(i){
            process(items[i--]);
      }
      i = Math.floor(items.length / 8);
      while(i){
            process(items[i--]);
            process(items[i--]);
            process(items[i--]);
            process(items[i--]);
            process(items[i--]);
            process(items[i--]);
            process(items[i--]);
            process(items[i--]);
      }
      虽然此代码中使用两个循环替代了先前的一个，但它去掉了循环体中的switch 表达式，速度更快。是否值得使用达夫设备，无论是原始的版本还是修改后的版本，很大程度上依赖于迭代的次数。如果循环迭代次数少于1'000 次，你可能只看到它与普通循环相比只有微不足道的性能提升。如果迭代次数超过1'000 次，达夫设备的效率将明显提升。例如500'000 次迭代中，运行时间比普通循环减少到70%。
      三、基于函数的迭代
      ECMA-262标准第四版介绍了本地数组对象的一个新方法forEach()。此方法遍历一个数组的所有成员，并在每个成员上执行一个函数。在每个元素上执行的函数作为forEach()的参数传进去，并在调用时接收三个参数，它们是：数组项的值，数组项的索引，和数组自身。下面是用法举例：
      items.forEach(function(value, index, array){
            process(value);
      });
      forEach()函数在Firefox，Chrome，和Safari中为原生函数。另外，大多数JavaScript库都有等价实现：
      //YUI 3
      Y.Array.each(items, function(value, index, array){
            process(value);
      });
      //jQuery
      jQuery.each(items, function(index, value){
            process(value);
      });
      //Dojo
      dojo.forEach(items, function(value, index, array){
            process(value);
      });
      //Prototype
      items.each(function(value, index){
            process(value);
      });
      //MooTools
      $each(items, function(value, index){
            process(value);
      });
      尽管基于函数的迭代显得更加便利，它还是比基于循环的迭代要慢一些。每个数组项要关联额外的函数调用是造成速度慢的原因。在所有情况下，基于函数的迭代占用时间是基于循环的迭代的八倍，因此在关注执行时间的情况下它并不是一个合适的办法。