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

【问题标题】：Is there a performance difference between jquery selector or a variablejquery选择器或变量之间是否存在性能差异
【发布时间】：2009-10-22 10:13:40
【问题描述】：

最近我一直在想，一遍又一遍地重复选择器或仅使用 var 并将选择器存储在其中并引用它之间是否存在性能差异。

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

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

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

或者只是

var Object = $('#Element');

Object.dothis();

Object.dothat();

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

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

【问题讨论】：

【解决方案1】：

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

【讨论】：

知道如何解决这个问题吗？也就是说，将选择器存储在一个变量中，但它是否考虑了不断变化的 DOM？我能想到的只是在变量中存储一个返回选择器的函数（但它似乎对我不起作用）
使选择无效可能非常困难，由于旧的浏览器和竞争条件，没有人这样做。最好的方法是，如果您正在编写更改 dom 的所有代码，请在进行更改时自行将元素添加到集合中。所以如果你插入一些你知道你有收藏的东西，做一个$mycollection.add(newNode);

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

使用 Ghommey 的方法

var Object = $('#Element');

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

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

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

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

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

【讨论】：