javascript - JS 循环和填充数组。哪个更快？

Question

我刚看到Nicholas Zakas of Yahoo的视频，在 GoogleTalks 上谈论加速您的网站。他提到的其中一件事是以相反的顺序执行循环以跳过两个比较之一:for (i = len; i--;) {}

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

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”。

所以看起来 Nicholas 最难反对的方法实际上在几乎所有情况下都更快。

我不够聪明，不知道 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() 函数之类的东西确实会导致增加函数调用(以及相关的额外开销)，但它们也往往使表达内容变得容易得多您希望代码执行此操作。

引用迈克尔· jackson 的话:“程序优化的第一条规则:不要做。程序优化的第二条规则(仅供专家使用!):先不要做。”