jQuery选择VS局部变量的性能(Performance of jQuery selectors

难道建议，当我需要不止一次访问的功能范围的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？

Answer 1:

重用选择的参考，你的第一个案例，绝对快。 这是一个测试我作为证据提出：

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

在后一种情况下，重新定义你的选择，是更慢〜35％的报道。

Answer 2:

不要忘了这一个：

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

Answer 3:

存储在局部变量的参考值将是大于每个时间运行选择代码更快。 它只是没有执行任何代码，当你把它存储在一个变量找到合适的元素（S）的问题。 我的经验法则是对jQuery查找的结果存储在一个变量，如果我要使用它不止一次。

Answer 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');
      });
    });
}

Answer 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与元素的一个新的选择变量。

文章来源: Performance of jQuery selectors vs local variables