• <td id="ae6ms"><li id="ae6ms"></li></td>
    • <xmp id="ae6ms"><td id="ae6ms"></td><table id="ae6ms"></table>
    • <table id="ae6ms"></table>
    • <td id="ae6ms"></td>
    <td id="ae6ms"></td>
  • <table id="ae6ms"></table><table id="ae6ms"><td id="ae6ms"></td></table>
    • <td id="ae6ms"></td>
  • <table id="ae6ms"><li id="ae6ms"></li></table>
  • <table id="ae6ms"></table>
    西西軟件園多重安全檢測下載網站、值得信賴的軟件下載站！
    軟件
    軟件
    文章
    搜索

    首頁 → 編程開發 → javascript|JQuery → javascript循環性能大比拼

    javascript循環性能大比拼

    相關軟件相關文章發表評論 來源：本站原創時間：2010/1/29 0:19:41字體大?。?em class="fontsize">A-A+

    作者：不詳點擊：929次評論：1次標簽： javascript

    1500個前端開發常用JavaScript特效
    • 類型：電子教程大?。?i>3.3M語言：中文 評分：3.6
    • 標簽：
    立即下載

    在設計選擇器，我就做了這方面的比較，只不過這次幸運遇到另一個測試程序，它覆蓋面更廣，測試類型更全面。最后發現自己在選擇器中用了一個很慢的循環……囧。由于IE性能比較低下，原程序根本無法運行，因此我把它移到我的博客上來，漢化一下，并減少大量的測試個數（原程序測試個數為1000，我把IE的測試個數減少為300）。但即使這樣，它還是彈出警告框問你是否中止循環，你繼續按否，就能看到結果了。 查看運行實例:http://www.cnblogs.com/rubylouvre/archive/2010/01/29/1658824.html


    <!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>

    <script type="text/javascript">

    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;
    }

    var forEachImp = 'native';
    if (!Array.prototype.forEach) {
    forEachImp = 'custom';
    Array.prototype.forEach = function(fun) {
    var len = this.length;
    if (typeof fun != "function") { throw new TypeError(); }
    var thisp = arguments[1];
    for (var i = 0; i < len; i++) {
    if (i in this) { fun.call(thisp, this[i], i, this); }
    }
    };
    }

    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() + ''); }

    var sarr = [];
    var lsize = size;
    var which_i = 0;
    while (lsize--) {
    var skip_ahead = 0;
    if (Math.random()> 0.4) {
    skip_ahead = Math.ceil(Math.random() * 10);
    } else if (Math.random()> 0.2) {
    skip_ahead = Math.ceil(Math.random() * 50);
    }
    which_i += skip_ahead;
    sarr[which_i] = '' + 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循環';

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

    var popArrs = [];
    for (var i=0; i<mult; i++) { popArrs.push(arr.slice()); }
    testDesc = "var x; while (x = arr.pop()) { }";
    start[testDesc] = new Date().getTime();
    for(var a=0;a<mult;a++) {
    var x; while (x = popArrs[a].pop()) { }
    }
    end[testDesc] = new Date().getTime();
    comment[testDesc] = '通過pop方法驅動while循環(但可能會在稀疏數組中出錯).';

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

    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; < len; i++) { var x = arr[i]; }";
    start[testDesc] = new Date().getTime();
    for(var a=0;a<mult;a++) {
    for (var i=0, len=arr.length; i<len; i++) { var x = arr[i]; }
    }
    end[testDesc] = new Date().getTime();
    comment[testDesc] = '普通循環，并在循環增加引用';

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

    testDesc = "arr.forEach(function(x){});";
    start[testDesc] = new Date().getTime();
    for(var a=0;a<mult;a++) {
    arr.forEach(function(x){});
    }
    end[testDesc] = new Date().getTime();
    comment[testDesc] = forEachImp+' forEach循環';

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

    testDesc = "var f=function(x){}; for (var i=0, len=arr.length; i<len; i++) { f(arr[i]); }";
    start[testDesc] = new Date().getTime();
    for(var a=0;a<mult;a++) {
    var f=function(x){}; for (var i=0, len=arr.length; i<len; i++) { f(arr[i]); }
    }
    end[testDesc] = new Date().getTime();
    comment[testDesc] = '用for循環模擬forEach';

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

    result += '<table class="data">';
    result += '<caption>原生數組對象 (length='+arr.length+', looped '+mult+' times)</caption>';
    for (var testDesc in start) {
    result += '<tr>';
    result += '<td class="comment">'+comment[testDesc]+'</td>';
    result += '<td class="code">'+esc(testDesc)+'</td>';
    result += '<td class="bench">'+(end[testDesc] - start[testDesc])+'ms</td>';
    result += '</tr>';
    }
    result += '</table>';

    var start = {};
    var end = {};
    var comment = {};

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

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

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

    testDesc = "for (var i=0, len=sarr.length; i<len; i++) { }";
    start[testDesc] = new Date().getTime();
    for(var a=0;a<mult;a++) {
    for (var i=0, len=sarr.length; i<len; i++) { }
    }
    end[testDesc] = new Date().getTime();
    comment[testDesc] = 'for循環，但預先緩存length屬性';

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

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

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

    testDesc = "var i = 0, len = sarr.length; while (i < len) { i++; }";
    start[testDesc] = new Date().getTime();
    for(var a=0;a<mult;a++) {
    var i = 0, len = sarr.length; while (i < len) { i++; }
    }
    end[testDesc] = new Date().getTime();
    comment[testDesc] = 'while循環，但預先緩存length屬性';

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

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

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

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

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

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

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

    testDesc = "for (var i in sarr) { }";
    start[testDesc] = new Date().getTime();
    for(var a=0;a<mult;a++) {
    for (var i in sarr) { }
    }
    end[testDesc] = new Date().getTime();
    comment[testDesc] = 'for...in循環';

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

    testDesc = "var isInt = /(^[0-9]$)|(^[1-9][0-9]+$)/; for (var i in sarr) { 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 sarr) { if(!isInt.test(i)){continue;} }
    }
    end[testDesc] = new Date().getTime();
    comment[testDesc] = 'for...in循環并進行isInt檢測';

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

    testDesc = "sarr.forEach(function(x){});";
    start[testDesc] = new Date().getTime();
    for(var a=0;a<mult;a++) {
    sarr.forEach(function(x){});
    }
    end[testDesc] = new Date().getTime();
    comment[testDesc] =forEachImp+ 'Array.forEach() ';

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

    testDesc = "var f=function(x){}; for (var i=0, len=sarr.length; i<len; i++) { f(sarr[i]); }";
    start[testDesc] = new Date().getTime();
    for(var a=0;a<mult;a++) {
    var f=function(x){}; for (var i=0, len=sarr.length; i<len; i++) { f(sarr[i]); }
    }
    end[testDesc] = new Date().getTime();
    comment[testDesc] = '用for循環模擬forEach';

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

    result += '<table class="data">';
    result += '<caption>稀疏數組對象 (length='+sarr.length+', sporadically populated with '+size+' items, looped '+mult+' times)</caption>';
    for (var testDesc in start) {
    result += '<tr>';
    result += '<td class="comment">'+comment[testDesc]+'</td>';
    result += '<td class="code">'+esc(testDesc)+'</td>';
    result += '<td class="bench">'+(end[testDesc] - start[testDesc])+'ms</td>';
    result += '</tr>';
    }
    result += '</table>';

    var start = {};
    var end = {};
    var comment = {};

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

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

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

    testDesc = "for (var i=0, len=hColl.length; i<len; i++) { }";
    start[testDesc] = new Date().getTime();
    for(var a=0;a<mult;a++) {
    for (var i=0, len=hColl.length; i<len; i++) { }
    }
    end[testDesc] = new Date().getTime();
    comment[testDesc] = 'for循環，但預先緩存length屬性';

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

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

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

    testDesc = "var i = 0, len = hColl.length; while (i < len) { i++; }";
    start[testDesc] = new Date().getTime();
    for(var a=0;a<mult;a++) {
    var i = 0, len = hColl.length; while (i < len) { i++; }
    }
    end[testDesc] = new Date().getTime();
    comment[testDesc] = 'while循環，但預先緩存length屬性';

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

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

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

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

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

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

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

    testDesc = "for (var i in hColl) { }";
    start[testDesc] = new Date().getTime();
    for(var a=0;a<mult;a++) {
    for (var i in hColl) { }
    }
    end[testDesc] = new Date().getTime();
    comment[testDesc] = 'for...in循環';

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

    testDesc = "var isInt = /(^[0-9]$)|(^[1-9][0-9]+$)/; for (var i in hColl) { 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 hColl) { if(!isInt.test(i)){continue;} }
    }
    end[testDesc] = new Date().getTime();
    comment[testDesc] = 'for...in循環并進行isInt檢測';

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

    testDesc = "for (var i=0; hColl[i]; i++) { }";
    start[testDesc] = new Date().getTime();
    for(var a=0;a<mult;a++) {
    for (var i=0; hColl[i]; i++) { }
    }
    end[testDesc] = new Date().getTime();
    comment[testDesc] = 'for循環，通過自動轉換元素來中斷循環';

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

    testDesc = "for (var i=0; hColl[i]; i++) { var x = hColl[i]; }";
    start[testDesc] = new Date().getTime();
    for(var a=0;a<mult;a++) {
    for (var i=0; hColl[i]; i++) { var x = hColl[i]; }
    }
    end[testDesc] = new Date().getTime();
    comment[testDesc] = '同上，并在循環中引用元素';

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

    testDesc = "for (var i=0, x; x = hColl[i++];) { }";
    start[testDesc] = new Date().getTime();
    for(var a=0;a<mult;a++) {
    for (var i=0, x; x = hColl[i++];) { }
    }
    end[testDesc] = new Date().getTime();
    comment[testDesc] = '同上，不過是利用引用中斷循環';

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

    testDesc = "for (var i=0, x; x = hColl.item(i++);) { }";
    start[testDesc] = new Date().getTime();
    for(var a=0;a<mult;a++) {
    for (var i=0, x; x = hColl.item(i++);) { }
    }
    end[testDesc] = new Date().getTime();
    comment[testDesc] = '同上，不過是通過item獲取元素然后放到變量';

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

    testDesc = "for (var i=0, len=hColl.length; i<len; i++) { var x = hColl[i]; }";
    start[testDesc] = new Date().getTime();
    for(var a=0;a<mult;a++) {
    for (var i=0, len=hColl.length; i<len; i++) { var x = hColl[i]; }
    }
    end[testDesc] = new Date().getTime();
    comment[testDesc] = 'for循環，在循環增加引用元素';

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

    result += '<table class="data">';
    result += '<caption>HTML Collection對象 (length='+hColl.length+', looped '+mult+' times)</caption>';
    for (var testDesc in start) {
    result += '<tr>';
    result += '<td class="comment">'+comment[testDesc]+'</td>';
    result += '<td class="code">'+esc(testDesc)+'</td>';
    result += '<td class="bench">'+(end[testDesc] - start[testDesc])+'ms</td>';
    result += '</tr>';
    }
    result += '</table>';

    document.body.innerHTML += result;

    document.getElementById('h').firstChild.data = 'Done Testing.';
    document.getElementById('h').style.color='#060';
    }

    </script>

    </head>
    <body>

    <h1 id="h">javascript循環測試程序</h1>

    <h2><a href="#" onclick="this.style.display='none';test();return false;">開始測試</a></h2>

    </body>
    </html>

    運行代碼

    由上面的實驗我們基本上可得出以下結論：

    while循環比for循環快。
    倒序循環比順序循環快。
    緩存length屬性比不緩存快。
    請不要用arr[i]來判斷是否中止循環。
    請不要在循環內聲明變量，用它來引用數組元素，若真的想省幾個字符，請在循環外聲明。
    除非是循環對象的屬性，請不要用for...in循環。
    請不要用JavaScript 1.6 的forEach迭代器，特慢！
    由于javascript與DOM緊密相連，操作DOM基本上是操作其中的元素節點，因此我覺得基本上以下幾個循環就夠用:

    01.//順序
    02.for(var i=0,n=arr.length;i<n;i++){}
    03.

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

    06.//倒序
    07.

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

    10.//遍歷對象（不要用在數組上）
    11.var val;
    12.for(var key in obj){
    13.
    val = obj[key]
    14.}

      相關文章

      12-03谷歌瀏覽器如何關閉javascript 谷歌瀏覽器禁用javascript方法
      01-06Aptana Studio 3安裝調試jquery\javascript
      01-06javascript函數調用的幾種方法
      12-19JavaScript的正則表達式語法、經典 Javascript 正則表達式
      08-24javascript中字符串常用操作總結、JS字符串操作大全
      07-11Visual Studio 2012設置Jquery/Javascript智能提示
      05-15node.js+express安裝配置教程、構建JavaScript的Web開發環境
      04-22Javascript中的“作用域鏈”知識分享
      03-06javascript中函數語句和表達式定義函數的區別
      03-04深入理解JavaScript函數原型

      相關評論

      閱讀本文后您有什么感想? 已有人給出評價!

      • 8 喜歡喜歡
      • 3 頂頂
      • 1 難過難過
      • 5 囧囧
      • 3 圍觀圍觀
      • 2 無聊無聊

      熱門評論

      最新評論

      發表評論 查看所有評論(1)

      昵稱:
      表情: 高興 可 汗 我不要 害羞 好 下下下 送花 屎 親親
      字數: 0/500 (您的評論需要經過審核才能顯示)
      推薦文章

      u3d快速入門圖文教程 jQuery選擇器介紹：基本選擇器、層次選擇器、過濾選擇器、表單選擇器

      相關下載

      名稱大小下載

      最新文章
      女人让男人桶30分钟免费视频，女人张开腿让男人桶个爽，一进一出又大又粗爽视频
      • <td id="ae6ms"><li id="ae6ms"></li></td>
      • <xmp id="ae6ms"><td id="ae6ms"></td><table id="ae6ms"></table>
      • <table id="ae6ms"></table>
      • <td id="ae6ms"></td>
      <td id="ae6ms"></td>
    • <table id="ae6ms"></table><table id="ae6ms"><td id="ae6ms"></td></table>
      • <td id="ae6ms"></td>
    • <table id="ae6ms"><li id="ae6ms"></li></table>
    • <table id="ae6ms"></table>