jQuery，最佳使用问题答案

【问题标题】：jQuery, optimal usage questionjQuery，最佳使用问题
【发布时间】：2011-05-17 04:37:27
【问题描述】：

我不知道 jQuery 在底层是如何工作的，但假设我在某个时候创建了一个 jQuery 对象：

var thingy = $('#thingy');

代码再往下看，重用thingy有什么区别：

thingy.empty();

与再次制作 jQuery 相比？：

$('#thingy').empty();

我猜在第二种情况下，我们必须创建另一个 jQuery 对象，但我怀疑这是微不足道的。我试图通过重用变量来避免的是对匹配元素进行 DOM 搜索。也许无论如何都会发生这种搜索？

我最初的假设是在创建$ 对象时扫描文档。但后来我突然想到 $ 对象可能只是一个迭代器，每次执行它的一个方法时它都会再次扫描文档。我想这是我问题的症结所在。

【问题讨论】：

【解决方案1】：

如果你的选择器是一个单一的对象，那还不错，但是如果你的选择器是 $('.thingy') 呢？每次您再次创建它时，它都会迭代整个文档以查找该类，而不是使用存储的选择。还不错，但它会为该选择创建一个新的 DOM 对象。如果有 500 个 .thingy 实例，那么它很快就会陷入困境。

ETA：正如 no.good.at.coding 指出的那样，每次使用任何类型的选择器时，都会遍历整个 DOM。所以是的 - 将它存储在一个变量中，调用该变量。

【讨论】：

【解决方案2】：

这些 SO 问题的答案表明，如果您重用 jQuery 对象会更快：

【讨论】：

【解决方案3】：

要考虑的另一件事是 DOM 更改。确保在你设置好之后，不会发生导致 $('#thingy') 消失的事情！

【讨论】：

【解决方案4】：

一般来说，只要您确定选择器的结果不会改变，您就会想要“缓存”它们。

您的示例相当简单，因为 #id 选择器已经非常高效（本质上，它只是将其直接传递给 document.getElementById() 调用。

正如其他人所提到的，当您使用性能较差的选择器（例如 $('.class') ）时，您开始看到节省。

通过以这种方式使用变量，您可以节省大量额外的处理。例如：

var tree = $('.bigTree');

// Do random stuff with tree
// ...

var segment = tree.find('.subsection');

// Do random stuff with segment...

在上面的示例中，变量“segment”能够使用变量树的结果，而无需再次访问整个 DOM，从而为您节省了一点性能。虽然像这样的微不足道的例子很少值得付出努力，但确保您正在为一些代码（例如循环）做这种事情可以帮助显着加快您的应用程序的速度。

当然，如果您要动态更新 DOM，请确保您使用的是“新鲜”选择器以确保您获得任何更改 :)

【讨论】：