jquery - jQuery：最好在迭代中使用 $('#elem') 或 var x = $('#elem')？

Question

这是一个效率问题。我已经用我的 Chrome 以某种方式进行了测试，但我不知道其他浏览器。

有一些变量会影响结果，例如：

• 要执行的迭代次数

• 变量的维度：$('.elem') 与 $('#elem') 不同。

• DOM 结构

我所做的测试在这里：按 id搜索，按类搜索

for (j=0;j<med;j++){

    start = new Date().getTime();
    pippo = $(target);
    for (var n = 0; n < maxCount; n++) {
        pippo.css({height:'45px'});
    }
    elapsed = new Date().getTime() - start;
    result1 += elapsed;


    start = new Date().getTime(); 
    for (var n = 0; n < maxCount; n++) {
        $(target).css({height:'45px'});
    }
    elapsed = new Date().getTime() - start;
    result2 += elapsed;
}

结果似乎表明存储变量比每次搜索都要好。

你有什么意见？

对于我的浏览器，我在存储变量时有 20-30% 的加速。

Answer 1

鉴于示例中的元素由 选择id，它在页面中应该是唯一的。因此，您应该始终在循环之前对其进行缓存。

var $pippo = $('#pippo');

for (j = 0; j < med; j++) {    
    start = new Date().getTime();
    for (var n = 0; n < maxCount; n++) {
        $pippo.css({ height: '45px' });
    }
    elapsed = new Date().getTime() - start;
    result1 += elapsed;
}

如果选择器是 aclass那么您需要在循环中定义选择器，或者更好地使用each()它，因为它迭代单个选择器。