jquery选择器或变量之间是否存在性能差异

Question

最近我一直想知道在重复选择器之间是否存在性能差异，或者只是使用var并将选择器存储在那里并且只是引用它。

$('#Element').dothis();

$('#Element').dothat();

$('#Element').find('a').dothat();

或只是

var Object = $('#Element');

Object.dothis();

Object.dothat();

$('a', Object).dothat();

我更喜欢第二种方式，因为它看起来更干净，更易于维护。

Answer 1

肯定存在性能差异，因为每次都不必执行sizzle，但是，还存在功能差异。如果dom恰好在第1次和第3次调用之间发生变化，则缓存的jQuery对象仍将包含旧的元素集。如果您缓存一个集合然后在回调中使用它，通常会发生这种情况。

Answer 2

我更喜欢第二种方式。即使元素ID或类发生更改， 也更容易维护代码 。

Answer 3

还有另一种快速方式。 它和你的第二个代码一样快。

$('#Element')
   .dothis()
   .dothat()
   .find('a')
      .dothat();

Answer 4

花费Ghommey的方法

var Object = $('#Element');

Object
   .dothis()
   .dothat()
   .find('a')
      .dothat();

更快，并存储该对象供以后使用。

Answer 5

第二种方式具有性能优势。它可能会也可能不会很好，但它会更好。在第一个版本中，你正在进行dom遍历4次，在第二个版本中你只进行2次。

关于加速jQuery的非常好的文章：http://net.tutsplus.com/tutorials/javascript-ajax/10-ways-to-instantly-increase-your-jquery-performance/

Answer 6

将jQuery选择的结果存储到变量中的速度更快。这是因为每当您尝试访问结果时，jQuery都不需要查找结果。

我整理了一些效果指标：http://jsperf.com/jquery-selectors-vs-stored-variable

在Mac OS X 10.8.2上的Chrome 26.0.1410.63上：
选择：40,276 ops / sec
存储变量：594,031,358 ops / sec