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

Question

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