为什么要缓存 jQuery 对象？

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

在以下场景中：

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

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

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

如果是因为性能原因，那么它是如何减少使用量的呢？

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

您可以通过以下方式查看此操作的实际效果在 jsPerf 中测试您的示例.

您也可以将其视为以下示例引入解释变量出于可读性目的而重构模式，特别是对于比问题中的示例更复杂的示例。