javascript循环性能大比拼

在设计选择器，我就做了这方面的比较，只不过这次幸运遇到另一个测试程序，它覆盖面更广，测试类型更全面。最后发现自己在选择器中用了一个很慢的循环……囧。由于IE性能比较低下，原程序根本无法运行，因此我把它移到我的博客上来，汉化一下，并减少大量的测试个数（原程序测试个数为1000，我把IE的测试个数减少为300）。但即使这样，它还是弹出警告框问你是否中止循环，你继续按否，就能看到结果了。

<!doctype html>
<html dir="ltr" lang="zh-CN">
  <head>
    <meta charset="utf-8"/>
    <title>各种循环比较 by 司徒正美</title>
    <style type="text/css">
      body{font-family:helvetica,arial,sans-serif;font-size:12px;}
      span{display:none;}
      table{border-collapse:collapse;margin:10px 0px;}
      caption{text-align:left;font-size:18px;font-weight:bold;margin:10px 0px;}
      td{padding:10px;border:2px solid #ccc;}
      td.bench{color:#c60;font-weight:normal;}
      td.code{font-family:"courier new",monospace;}

</style>

var chars = '0123456789abcdef';

function getRandomString() {
        var len = Math.ceil(Math.random() * 7) + 3; // 4-10
        var result = "";
        while (len--) {
          result += chars.charAt(Math.floor(Math.random() * chars.length));
        }
        return result;
      }

function createDummySpans(howMany) {
        for (var i=0; i<howMany; i++) {
          var span = document.createElement('span');
          span.innerHTML = ' ' + getRandomString() + ' ';
          document.body.appendChild(span);
        }
      }

function esc(str) {
        str=str.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');
        return str;
      }

function test() {
        document.getElementById('h').firstChild.data = 'Testing...';
        document.getElementById('h').style.color='#c60';

var size = !+"\v1" ? 300 : 1000;
        var mult =   100;

var arr = [];
        var lsize = size;
        while (lsize--) { arr.push('' + getRandomString() + ''); }

createDummySpans(size);
        var hColl = document.getElementsByTagName('span');

var start = {};
        var end = {};
        var comment = {};
        var testDesc;
        var result = "";

//#########################################

testDesc = "for (var i=0; i<arr.length; i++) {  }";
        start[testDesc] = new Date().getTime();
        for(var a=0;a<mult;a++) {
          for (var i=0; i<arr.length; i++) {  }
        }
        end[testDesc] = new Date().getTime();
        comment[testDesc] = '普通for循环';

//#########################################

testDesc = "for (var i=0, len=arr.length; i<len; i++) {  }";
        start[testDesc] = new Date().getTime();
        for(var a=0;a<mult;a++) {
          for (var i=0, len=arr.length; i<len; i++) {  }
        }
        end[testDesc] = new Date().getTime();
        comment[testDesc] = 'for循环，但预先缓存length属性';

//#########################################

testDesc = "var i = 0; while (i < arr.length) { i++; }";
        start[testDesc] = new Date().getTime();
        for(var a=0;a<mult;a++) {
          var i = 0; while (i < arr.length) { i++; }
        }
        end[testDesc] = new Date().getTime();
        comment[testDesc] = '普通while循环';

//#########################################

testDesc = "var i = 0, len = arr.length; while (i < len) { i++; }";
        start[testDesc] = new Date().getTime();
        for(var a=0;a<mult;a++) {
          var i = 0, len = arr.length; while (i < len) { i++; }
        }
        end[testDesc] = new Date().getTime();
        comment[testDesc] = 'while循环，但预先缓存length属性';

//#########################################

testDesc = "var i = arr.length; while (i--) {  }";
        start[testDesc] = new Date().getTime();
        for(var a=0;a<mult;a++) {
          var i = arr.length; while (i--) {  }
        }
        end[testDesc] = new Date().getTime();
        comment[testDesc] = '倒序while循环';

//#########################################

testDesc = "var i = arr.length-1; do {  } while (i--);";
        start[testDesc] = new Date().getTime();
        for(var a=0;a<mult;a++) {
          var i = arr.length-1; do {  } while (i--);
        }
        end[testDesc] = new Date().getTime();
        comment[testDesc] = 'do ... while循环';

//#########################################

testDesc = "for (var i=arr.length; i--;) {  }";
        start[testDesc] = new Date().getTime();
        for(var a=0;a<mult;a++) {
          for (var i=arr.length; i--;) {  }
        }
        end[testDesc] = new Date().getTime();
        comment[testDesc] = '倒序for循环';

//#########################################

//#########################################

testDesc = "for (var i in arr) {  }";
        start[testDesc] = new Date().getTime();
        for(var a=0;a<mult;a++) {
          for (var i in arr) {  }
        }
        end[testDesc] = new Date().getTime();
        comment[testDesc] = 'for...in循环（但可能会遍历更多东西）';

//#########################################

testDesc = "var isInt = /(^[0-9]$)|(^[1-9][0-9]+$)/; for (var i in arr) { if(!isInt.test(i)){continue;} }";
        start[testDesc] = new Date().getTime();
        var isInt = /(^[0-9]$)|(^[1-9][0-9]+$)/;
        for(var a=0;a<mult;a++) {
          for (var i in arr) { if(!isInt.test(i)){continue;} }
        }
        end[testDesc] = new Date().getTime();
        comment[testDesc] = 'for...in循环并进行isInt检测';

//#########################################

testDesc = "for (var i=0; arr[i]; i++) {  }";
        start[testDesc] = new Date().getTime();
        for(var a=0;a<mult;a++) {
          for (var i=0; arr[i]; i++) {  }
        }
        end[testDesc] = new Date().getTime();
        comment[testDesc] = 'for循环，利用元素的自动转换进行中断循环（但如果某个元素为零……）.';

//#########################################

testDesc = "for (var i=0; arr[i]; i++) { var x = arr[i]; }";
        start[testDesc] = new Date().getTime();
        for(var a=0;a<mult;a++) {
          for (var i=0; arr[i]; i++) { var x = arr[i]; }
        }
        end[testDesc] = new Date().getTime();
        comment[testDesc] = '同上，并增加更多检测';

//#########################################

testDesc = "for (var i=0, x; x = arr[i++];) {  }";
        start[testDesc] = new Date().getTime();
        for(var a=0;a<mult;a++) {
          for (var i=0, x; x = arr[i++];) {  }
        }
        end[testDesc] = new Date().getTime();
        comment[testDesc] = '同上，合并当中两个步骤.';

//#########################################

testDesc = "for (var i=0, len=arr.length;  
<p><button type="button" class="runcode" title="runcode1">运行代码</button></p> 
<p>由上面的实验我们基本上可得出以下结论：</p>
<ol>
<li>while循环比for循环快。</li>
<li>倒序循环比顺序循环快。</li>
<li>缓存length属性比不缓存快。</li>
<li>请不要用arr[i]来判断是否中止循环。</li>
<li>请不要在循环内声明变量，用它来引用数组元素，若真的想省几个字符，请在循环外声明。</li>
<li>除非是循环对象的属性，请不要用for...in循环。</li>
<li>请不要用JavaScript 1.6 的forEach迭代器，特慢！如果一定要用forEach，那么建议自己打造一个。</li>

</ol>
<p>由于javascript与DOM紧密相连，操作DOM基本上是操作其中的元素节点，因此我觉得基本上以下几个循环就够用:</p>
<pre class="brush:javascript;gutter:false;toolbar:false;">
//顺序
for(var i=0,n=arr.length;i<n;i++){}

var i = 0, n= arr.length; while (i<n) { i++; }

//倒序

var i = arr.length; while (i--) { }

//遍历对象（不要用在数组上）
var val;
for(var key in obj){
     val = obj[key]
}
</pre>