JS循环和填充数组.哪个更快？

Question

我刚刚看到雅虎的Nicholas Zakas的视频,在GoogleTalks谈论加速你的网站.他提到的一件事是以相反的顺序进行循环,以跳过两个比较中的一个:for (i = len; i--;) {}

他说要远离JS库的实现for each.只是为了好玩,我想我会尝试一下.事实证明他错了.

var array1 = new Array();
var array2 = new Array();
var start = 0;
var finished = 0;
start = (new Date).getTime();
$("#newDivTest").children().each(function(i){ 
    array1[i] = $(this).get(0).id;
});
finished = (new Date).getTime() - start;
alert(finished);

start = (new Date).getTime();
var len = $("#newDivTest").children().length;

for (i = len; i--;) {
    array2[i] = $(this).get(0).id;
}
finished = (new Date).getTime() - start;
alert(finished);

newDivTest包含1000个空div,其id从"0"开始并上升到"999".另一个注意事项是,$(this).get(0).id比$(this).attr("id")某些原因快3倍,有人知道为什么吗？

对于FF3.5,结果为"7"和"45",IE7给出"30"和"45",Chrome2给出"4"和"17",Opera10给出"16"和"16",最后Safari4给出"4"和"16".

因此,似乎尼古拉斯最难对付的方法实际上几乎在所有情况下都更快.

我不够聪明,不知道jQuery的each()方法背后会发生什么,但它必须做正确的事......对吗？

Answer 1

您的设置中的一个缺陷是您的第二次测试实际上不起作用.你写了:

for (i = len; i--;) {
    array2[i] = $(this).get(0).id;
}

但是this那里没有定义,所以整个操作都会失败.你必须做的事情如下:

var children = $("#newDivTest").children();
for (i = children.length; i--;) {
    array2[i] = children.get(i).id;
}

这比性能问题更紧迫:虽然调用jQuery的.each()函数会导致添加函数调用(以及相关的额外开销),但它们也更容易表达你想要的东西代码要做.

引用迈克尔·杰克逊:"程序优化的第一条规则:不要这样做.程序优化的第二条规则(仅限专家!):不要这样做."