Javascript Loop unrolling Duff device Javascript Duff装置循环展开

浏览数：140 / 时间：2015年06月08日

Javascript 中会用到for 循环，当要循环的数据记录很多的时候，可能会对性能产生很大影响。这时我们可以考虑展开for循环，这时就要用到Duff装置(Duff Device).

先来看一个小例子,用for循环来实现：

      function process(data) {
          htmlStr += data + "<br />";

          //div = document.getElementById("myDiv");
          //div.innerHTML += data + "<br />";
      }
      function forLoop(values) {
          console.time(‘forLoopTest‘);
          for (var i = 0; i < values.length; i++) {
              process(values[i]);
          }
          div.innerHTML = htmlStr;
          console.timeEnd(‘forLoopTest‘);
      }

这个for循环可以用duff 展开如下，（Jeff Greenberg 用javascript实现了Duff 装置，这里采用的是Jeff 的实现方法）

  function duff(values) {
          console.time(‘duff test‘);
          var iterations = Math.ceil(values.length / 8);
          var startAt = values.length % 8;
          var i = 0;
          do {
              switch (startAt) {
                  case 0: process(values[i++]);
                  case 7: process(values[i++]);
                  case 6: process(values[i++]);
                  case 5: process(values[i++]);
                  case 4: process(values[i++]);
                  case 3: process(values[i++]);
                  case 2: process(values[i++]);
                  case 1: process(values[i++]);
              }
              startAt = 0;
          } while (--iterations > 0);
          div.innerHTML = htmlStr;
          console.timeEnd(‘duff test‘);
      }

Andrew B.King 后来改进了的duff 装置，据说改进后的Dff装置，性能提升可以达到40% 左右。。。我们对应的代码如下：

  function newDuff(values) {
          console.time(‘test1‘);
          var iterations = Math.floor(values.length / 8);
          var leftover = values.length % 8;
          var i = 0;
          if (leftover > 0) {
              do {
                  process(values[i++]);
              } while (--leftover > 0);
          }

          do {
              process(values[i++]);
              process(values[i++]);
              process(values[i++]);
              process(values[i++]);
              process(values[i++]);
              process(values[i++]);
              process(values[i++]);
              process(values[i++]);
          } while (--iterations > 0);
          div.innerHTML = htmlStr;
          console.timeEnd(‘test1‘)
      }