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

Question

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

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

• 要进行的迭代次数

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

• DOM 结构

我做的测试在这里：search by id,search by class

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;
}

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