为什么要缓存 jQuery 对象？答案

【问题标题】：Why cache jQuery objects?为什么要缓存 jQuery 对象？
【发布时间】：2014-07-07 17:49:30
【问题描述】：

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

在以下场景中：

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

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

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

如果是因为性能问题，如何减少使用量？

【问题讨论】：

我认为如果您多次使用$('#bar')，第一个会更好，在您的示例中，它只使用了一次。所以这里应该没有任何优势。
@KingKing，哎呀，我编辑了它以包含两个动作。
来自在 Google 搜索结果中找到的 @mplungjan 文章，这里是相关的 JSPerf 测试：jsperf.com/ns-jq-cached/3
嗯。 Google 确实有帮助！
如前所述，缓存返回的查询结果可防止多次查找（尽管在# 查找的情况下，它是一个非常有效的getElementbyID），但纯粹是为了提及它：JQuery 帮助通过让其函数重新返回对象，因此 attr 返回与使用相同的对象，从而使以下成为可能：$('#bar').attr('style','cool').attr('width','100');。具有重用查询对象的相同优势。

标签： javascript jquery performance caching

【解决方案1】：

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

您可以通过testing your example in jsPerf 看到这一点。

出于可读性目的，您也可以将其视为Introduce Explaining Variable 重构模式的示例，特别是对于比问题中的示例更复杂的示例。

【讨论】：

【解决方案2】：

jQuery 选择器$('#foo') 在整个 DOM 中搜索匹配的元素，然后返回结果。

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

编辑：document.getElementById() 是 jQuery 用来搜索 DOM 的工具，但 jQuery 永远不够用。

【讨论】：

您的回答精神是正确的，但在 ID 选择器的特定实例中，jQuery 只是使用 document.getElementById()
@JasonSperske 谢谢。我会尝试更正我的答案。