在页面级别缓存 jQuery 选择是否是个好主意？

Question

我正在开发一个与主页有大量交互的 Intranet 网站。该站点广泛使用 jQuery。所以我考虑在第一次请求它们时缓存 jQuery 选择，并为每个后续请求从缓存中提取它们。 （如果我想强制重新选择，我还内置了一个覆盖）。

这是我想知道的基本 sn-p 代码：

( function(window, $, undefined) {
  var mp = {};
  mp.cache = [];
  mp.get = function ( selector, force) {
    return ( !force || !mp.cache[ selector ] )  /*separating for readability */
           ? mp.cache[ selector ] = $( selector ) 
           : mp.cache[ selector ];
  }

  /* more functions and code */

  window.mp = mp;
  window.$$ = mp.get;

})(window, jQuery);

它将像普通的 jQuery 选择一样使用，但会检查该选择器是否已经存在于 cache 数组中，如果存在，则从那里返回结果。

更新示例

$('#mainmenu').on('click','.menuitem', highlightSelectedMenuItem );

function highlightSelectedMenuItem () {
  var menuitems = $$('.menuitem'); //selected first time, from cache every other time
  menuitems.find('.current').removeClass('current');
  $(this).addClass('current');
}    

代码中有大约 20 - 30 种不同的选择。所以每个都会在第一次调用时被缓存。此代码将仅在桌面客户端（无手机/平板电脑）上运行。

好主意？这可能会导致什么问题？有没有一种好方法来测试这是否有助于/损害性能？您能提出的任何优点/缺点将不胜感激。

如果需要更多信息，请告诉我。
这是一个fiddle 来“摆弄”。

谢谢！

Answer 1

底线：可能是个坏主意。

您引入的复杂性可能是不必要的，而且很可能会占用内存。

如果您要加快重复选择的速度，请将选择存储在变量中。当不再需要它时，垃圾收集器会将其移除。对于 99% 的应用程序，这就是您需要的缓存。

您的示例的一个大问题是您选择的项目将无限期保留。想想以后可能会处理此代码的人。每个人都可能刚开始使用$$('....')，因为他们在一些地方看到了它，它与$('....') 做同样的事情。突然间，您无缘无故地在内存中存储了数千个 DOM 元素。

除此之外，如果 DOM 发生了变化而您不知道它发生了变化，那么您在缓存中的代码将毫无用处。但除非您强制它重新加载，否则您最终会继续得到它缓存的代码。这当然会引入错误。为了防止这种情况发生，您必须不断强制重新加载缓存，这几乎否定了它的用处。

您最好遵循已经存在的良好、可靠的编程模式......而不是编写一个会吸引错误磁铁的缓存机制。

Answer 2

我把你的问题变成了 jsperf，我发现未缓存的 jQuery 似乎运行得更快。

http://jsperf.com/jquery-cache-array-test

因此，我建议只使用纯 jQuery。

Answer 3

我认为这是个坏主意。如果您需要在多个地方使用选择，请将选择保存到变量中。 var mySelection = $(#myId)。

当它不再需要时会被垃圾回收。