jQuery，最佳使用问题

Question

我不知道jQuery是如何工作的，但是让我们说在某些时候我创建了一个jQuery对象：

var thingy = $('#thingy');

在代码的下方，重用thingy：

有什么不同

thingy.empty();

再次只是制作jQuery？ ：

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

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

我最初的假设是在创建$对象时扫描文档。但后来我发现$ object可能只是一个迭代器，每次执行其中一个方法时都会再次扫描文档。我想这是我提问的关键。

Answer 1

如果你的选择器是一个单独的对象，那不是很糟糕，但如果你的选择器是$（'。thingy'）怎么办？每次再次创建它时，它会迭代整个doc查找该类，而不是使用存储的选择。不是很糟糕，但随后它为该选择创建了一个新的DOM对象。如果有500个.thingy实例，那真的很快就会陷入困境。

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

Answer 2

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

• Is referencing a selector faster in jquery than actually calling the selector? if so, how much does it make a difference?
• Most efficient way to re-use jQuery-selected elements

Answer 3

要考虑的另一件事是DOM更改。确保在你设置好东西后，不会发生让$（'＃thingy'）消失的事情！

Answer 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，那么您正在使用“新鲜”选择器来确保您接受任何更改：）