jQuery选择器与局部变量的性能比较

当我需要在函数范围内多次访问jQuery选择器的结果时，是否建议我运行选择器一次并将其分配给局部变量

请原谅我这里的陈腐例子，但我认为它说明了这个问题。 那么，这段代码的执行速度会更快吗：

var execute = function(){
    var element = $('.myElement');
    element.css('color','green');
    element.attr('title','My Element');
    element.click(function(){
        console.log('clicked');
    });
}

除此代码外：

var execute = function(){
    $('.myElement').css('color','green');
    $('.myElement').attr('title','My Element');
    $('.myElement').click(function(){
        console.log('clicked');
    });
}

---

如果没有区别，有人能解释一下原因吗？jQuery是否会在选择元素后缓存它们，以便后续选择器不必再次搜索dom？

将引用存储在局部变量中会比每次运行选择代码更快。当您将元素存储在变量中时，只需不执行任何代码即可找到适当的元素。我的经验法则是，如果要多次使用jQuery查找，则将其结果存储在一个变量中。

这里的另一个选项是使用

每个

，而不是一次又一次地重复选择器及其相关工作

var execute = function(){
    $('.myElement').each(function() {
      var elem = $(this);
      elem.css('color','green');
      elem.attr('title','My Element');
      elem.click(function(){
        console.log('clicked');
      });
    });
}

---

重用选择器引用（第一种情况）肯定更快。我做了一个测试作为证明：

后一种情况，即重新定义选择器，报告速度慢约35%。

不要忘记这一点：

var execute = function(){ 
    $('.myElement')
        .css('color','green')
        .attr('title','My Element')
        .click(function(){ 
            console.log('clicked'); 
        });
}

---

实际上，您忘记了真正缓存的方法

jQuery的问题是：初始查找：

$（'.selector'）

非常昂贵。但是在那之后，把你的动作链接到它上面，或者把它赋给一个变量，然后在这个变量上执行你的动作就没那么重要了。您可以获得的主要性能增益是进一步缓存元素，而不是在函数调用的每次迭代中分配jQuery选择器

var element = $('.myElement');
var execute = function(){
    element.css('color','green');
    element.attr('title','My Element');
    element.click(function(){
        console.log('clicked');
    });
}

这种方法的速度几乎是其他方法的两倍

看

---

注意：若您的DOM在其生命周期内发生了变化，您可以使用新的元素选择更新

元素
变量。
若您对性能感兴趣，可以通过执行
$（此操作）重复地为对象重新分配内存并进行不必要的函数调用（当然，它们相当快）
对同一个元素反复使用不太理想。“不同之处在于
attr
函数。如果将其应用于集合，则只会影响集合中的第一个元素。”不，只有get时才是这样。在片场上，它为所有人都设置了：@T.J.Crowder我的错，我没有看我阅读文档的方法的签名。这是一个相当低效的方法。每次执行该函数时，您都会遍历选择器内的所有元素，并使用
var elem=$（this）
进行新赋值，使整个过程变慢。其中
n=选择器中的元素数量
。很酷的测试，很好，但我很困惑……红色条是否代表标签状态的“局部变量”示例？看起来需要更长的时间？是的，红色是局部变量。这有点混乱，图表中的时间越长越好。它表示每秒可以运行多少次操作。感谢您向我介绍该站点。太棒了！啊，明白了，谢谢，伙计，我需要一个+2按钮，一个用于你的答案，另一个用于那个一流的性能站点；）哈，太棒了！当我添加额外的测试时，我注意到颜色发生了变化。绿色是新的红色；）@我们太好了。我速度不够快，所以取消了相同的答案。。。但很高兴能确定这是一个选择。weotch能把这个加到他的速度测试中吗？+1。这是jQuery所设想的解决方案，因为他们的大多数示例都倾向于像这样将调用链接在一起。也许它并不比保存局部变量快，但它肯定比多重选择快，而且我认为它更优雅。添加了该测试。看起来是第一次打成平局@谢谢。在第一次运行时，重用变量仅仅比链接快一点点。在第二次运行时，链接速度明显加快。不过，我的回答也是+1。无需重复写入选择器。第一次运行稍微慢一点，对于优雅的代码来说代价很小……很酷，我已经看到一些jQuery的同事在这个网站上因为链接而猛烈抨击其他开发人员。我个人对此一点问题都没有，但有些人倾向于认为这是一种不好的做法，这让我对这样做持怀疑态度。看起来jQuery的确是为了优雅地处理链接而构建的。我应该忽略那些讨厌锁链的人吗？也许这是另一个问题，每个人都想知道你的答案，我希望我能全部接受