20

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

4

5 回答 5

21

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

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

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

于 2012-04-07T14:15:57.157 回答
9

不要忘记这一点：

var execute = function(){ 
    $('.myElement')
        .css('color','green')
        .attr('title','My Element')
        .click(function(){ 
            console.log('clicked'); 
        });
}
于 2012-04-07T14:19:51.830 回答
3

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

于 2012-04-07T14:10:38.837 回答
1

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

var execute = function(){
    $('.myElement').each(function() {
      var elem = $(this);
      elem.css('color','green');
      elem.attr('title','My Element');
      elem.click(function(){
        console.log('clicked');
      });
    });
}
于 2012-04-07T14:13:02.440 回答
1

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

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使用新选择的元素更新变量。

于 2015-04-07T13:10:11.240 回答