Javascript性能分析——循環遍歷

Javascript定義了4種循環，分別是for,while,do-while及for-in。前三種循環的性能相差不大，但是for-in循環性能非常差，它在每次循環執行時，需要遍歷對象中的所有屬性包括從原型鏈繼承而來的，至於它的性能到底有多少糟糕以下是Chrome18下的測試（用YUI Profiler做分析工具，如果不會用它可見我之前寫的 Javascript性能分析——工具（YUI Profiler）上）：

//數組長度
var loopCount = 20000000;

//准備測試數組
var mockAry = new Array();
for (var i = 0 ; i < loopCount; i++){
    mockAry.push(i);
}

//for循環
function testForAry(){
    for (var i = 0 ; i < loopCount; i++){
        var value = mockAry[i];
    }
}

//while循環
function testWhileAry(){
    var i = 0;
    while(i < loopCount){
        var value = mockAry[i];
        i++;
    }
}

//do-while循環
function testDoWhileAry(){
    var i = 0;
    do{
        var value = mockAry[i];
        i++;
    }while(i < loopCount);
}

//for-in循環
function testForInAry(){
    for (var item in mockAry){
        var value = item;
    }
}

//注冊待測試方法
YAHOO.tool.Profiler.registerFunction("testForAry", window);
YAHOO.tool.Profiler.registerFunction("testWhileAry", window);
YAHOO.tool.Profiler.registerFunction("testDoWhileAry", window);
YAHOO.tool.Profiler.registerFunction("testForInAry", window);

//每個測試方法被測試幾次
var testCount = 10;

for(var i =0; i < testCount ;i++){
    testForAry();
    testWhileAry();
    testDoWhileAry();
    testForInAry();
}

//生成測試報告
var report1 = YAHOO.tool.Profiler.getFunctionReport("testForAry");
var report2 = YAHOO.tool.Profiler.getFunctionReport("testWhileAry");
var report3 = YAHOO.tool.Profiler.getFunctionReport("testDoWhileAry");
var report4 = YAHOO.tool.Profiler.getFunctionReport("testForInAry");

console.log(report1);
console.log(report2);
console.log(report3);
console.log(report4);

測試結果：

 

可見，do-while比for和while慢些，但是這幾乎可以忽略，而for-in卻真的很糟糕，慢了100倍左右。在實際的工作中很少會遇到測試時這種瘋狂的循環，但還是需要注意盡可能少用for-in循環，不過當遍歷一個對象（而非一個簡單的數組）中的屬性時，for-in循環就是一個很好的幫手，在《高性能JavaScript》中還介紹了許多提高循環遍歷的技巧，以后做詳細介紹。