Javascript 为什么缓存jQuery对象？

那么为什么我们要缓存jQuery对象呢

在以下场景中：

var foo = $('#bar');
foo.attr('style','cool');
foo.attr('width','123');

$（'#bar'）.attr（'style'，'cool'）；
$（'#bar'）.attr（'width'，'123'）

为什么第一个选项比第二个选项好得多

如果是因为性能原因，它是如何减少使用的？
jQuery选择器
$（'#foo'）
在整个DOM中搜索匹配的元素，然后返回结果

缓存这些结果意味着jQuery不必在每次使用选择器时都搜索DOM

编辑：
document.getElementById（）
是jQuery用来搜索DOM的，但是jQuery永远都不够。
因为jQuery函数中有很多代码，如果使用相同的输入和相同的输出多次执行，这会带来不必要的开销。通过缓存结果，您可以存储对正在查找的确切元素或元素集的引用，这样就不必再次搜索整个DOM（即使搜索速度相当快）。在许多情况下（包含少量代码的简单页面），您不会注意到差异，但在您这样做的情况下，可能会产生很大的差异

你可以从下面的例子中看到这一点

您还可以将其视为重构模式的一个示例，以提高可读性，尤其是对于比问题中的示例更复杂的示例。
我认为第一个更好，如果您多次使用
$（“#bar”）
，在您的示例中，仅使用了1次。所以它在这里应该没有任何优势。@KingKing，哎呀，我编辑了它以包含两个动作。从谷歌搜索结果中找到的@mplungjan文章中，这里是相关的JSPerf测试：Mhm。谷歌真的帮了大忙！如前所述，缓存返回的查询结果可以防止多次查找（尽管在
#
查找的情况下，它是一个非常有效的getElementbyID），但纯粹是为了说明这一点：JQuery通过让其函数重新返回对象来提供帮助，因此attr返回使用的相同对象，使以下内容成为可能：
$（'#bar'）.attr（'style'，'cool'）.attr（'width'，'100'）。与重用查询对象具有相同的优势。您的回答的精神是正确的，但在ID选择器的特定实例中，jQuery只是使用@JasonSperske谢谢。我会尽力改正我的答案。