jQuery 选择器与局部变量的性能答案

【问题标题】：Performance of jQuery selectors vs local variablesjQuery 选择器与局部变量的性能
【发布时间】：2012-04-20 18:15:49
【问题描述】：

当我需要在函数范围内多次访问 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 performance caching jquery-selectors

【解决方案1】：

重用选择器引用，你的第一种情况，肯定更快。这是我做的一个测试作为证明：

http://jsperf.com/caching-jquery-selectors

后一种情况，重新定义您的选择器，报告为慢约 35%。

【讨论】：

很酷的测试，非常好，但我很困惑......红色条是否代表“局部变量”示例，因为它的标签状态？看起来需要更长的时间？
是的，红色是局部变量。这有点令人困惑，图表中越长越好。它表示每秒可以运行多少个操作。
感谢您向我介绍该网站。太棒了！
啊，明白了，谢谢伙计，我需要一个 +2 按钮，一个用于您的回答，一个用于该出色的性能网站；）
哈，太棒了！当我添加额外的测试时，我注意到颜色发生了变化。绿色是新的红色；）

【解决方案2】：

别忘了这个：

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

【讨论】：

@weotch 太好了。我的速度不够快，所以取消了我的相同答案……但很高兴能确定这是一个选项。 weotch 能把这个加到他的速度测试中吗？
+1。这是 jQuery 所设想的解决方案，因为他们的大多数示例都倾向于像这样将调用链接在一起。也许它并不比保存局部变量快，但肯定比多选快，而且我认为它更优雅。
添加了该测试。它看起来并列第一！
@weotch 谢谢。重用变量只比第一次运行时链接快一点。在第二次运行时，链接速度明显更快。尽管如此，我也对这个答案+1。无需重复编写选择器。第一次运行稍微慢一点是为优雅的代码付出的小代价......
酷，我看到一群 jQuery 研究员抨击该网站上的其他开发人员进行链接。我个人对此完全没有问题，但有些人倾向于认为这是不好的做法，这让我第二次猜测这样做。看起来 jQuery 确实是为了优雅地处理链接而构建的。我应该忽略链式仇恨者吗？也许这完全是另一个问题

【解决方案3】：

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

【讨论】：

【解决方案4】：

这里的另一种选择是使用each 而不是重复选择器，它是相关的工作，一次又一次

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

【讨论】：

如果您对性能感兴趣，重复地为对象重新分配内存并进行不必要的函数调用（当然，它们相当快）通过对同一元素一遍又一遍地执行 $(this) 是不太理想。
“区别在于attr 函数。如果将其应用于集合，它只会影响集合中的第一个元素。” 不，这仅适用于得到。在 set 上，它为所有人设置它：api.jquery.com/attr/#attr2
@T.J.Crowder 我的错，我没有查看我正在阅读文档的方法的签名。
这是一种相当低效的方法。每次执行该函数时，您都会遍历选择器内的所有元素，并使用var elem = $(this) 进行新的分配，从而使整个过程变得更慢n。在哪里n = the amount of elements in the selector。

【解决方案5】：

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

jQuery 的问题是初始查找：$('.selector') 很昂贵。但是在那之后，将您的操作链接到它上，或者将其分配给一个变量并在该变量上执行您的操作就没有那么重要了。您可以获得的主要性能提升是进一步缓存元素，而不是在函数调用的每次迭代中分配 jQuery 选择器。

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

这种方法的速度几乎是其他建议的最快版本的两倍。

见http://jsperf.com/caching-jquery-selectors/17

注意：如果您的 DOM 在其生命周期内发生变化，您可以使用新选择的元素更新 element 变量。

【讨论】：