Question

我正在一个内部网站上工作，与主页面有很多交互。该网站广泛使用jQuery。所以我考虑在第一次请求时缓存jQuery选择，并为每个后续请求从缓存中提取它们。（如果我想强制重新选择，我也内置了一个覆盖）。

以下是我想知道的基本代码片段：

( 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到＆＃34;小提琴＆＃34;用。

谢谢！

Answer 1

底线：可能是一个坏主意。

你引入的复杂性很可能是不必要的，而且很可能会耗尽内存。

如果您正在尝试加快重复的选择，请将选择内容存储在变量中。当不再需要时，垃圾收集器将删除它。对于99％的应用程序，可以根据需要进行缓存。

你的例子的一个大问题是你选择的项目将无限期地存在。想想以后可能会处理这段代码的人。每个人都可以开始使用$$('....')，因为他们会在几个位置看到它并且它与$('....')完全相同。突然间，你无缘无故地将数千个DOM元素存储在内存中。

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

只要遵循已经存在的良好，可靠的编程模式，你将会更好。而不是编写一个将成为bug磁体的缓存机制。

Answer 2

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

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

因为这个我建议只使用纯jQuery。

Answer 3

我认为这是一个坏主意。如果需要在多个位置使用选择，请将选择保存到变量。 var mySelection = $（＃myId）。

当它不再需要时，它将被垃圾收集。

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

3 个答案: