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》中还介绍了许多提高循环遍历的技巧，以后做详细介绍。