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了？

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

将引用存储在局部变量中将比每次运行选择代码更快。 这只是一个问题，当你将它存储在一个变量中时，不必执行任何代码来找到合适的元素。 我的经验法则是将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变量。