為什么要緩存jQuery對象？

Question

那么為什么我們應該緩存jQuery對象呢？

在以下情況下：

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

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

為什么第一種選擇比第二種選擇好得多？

如果是因為性能，如何減少使用量？

Answer 1

因為jQuery函數中包含許多代碼，所以如果使用相同的輸入期望輸出相同的內容多次執行該函數，則這會帶來不必要的開銷。 通過緩存結果，您可以存儲對要查找的確切元素或元素集的引用，因此不必再次搜索整個DOM（即使這是一個相當快的搜索）。 在許多情況下（帶有少量代碼的簡單頁面），您不會注意到差異，但是在您這樣做的情況下，差異可能會很大。

通過在jsPerf中測試您的示例，您可以看到實際的效果 。

您還可以將其視為出於可讀性目的而引入的“解釋變量重構”模式的示例，尤其是比問題中的示例更為復雜的示例。

Answer 2

jQuery選擇器$('#foo')在整個DOM中搜索匹配的元素，然后返回結果。

緩存這些結果意味着jQuery不必每次使用選擇器時都在DOM中進行搜索。

編輯： document.getElementById()是jQuery用於搜索DOM的工具，但是沒有足夠的jQuery。