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

Is it a good idea to cache jQuery selections on a page level?

本文关键字：选择 好主意 jQuery 缓存      更新时间：2023-09-26

我在一个内联网网站上工作，那里有很多与主页面的交互。该网站广泛使用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个不同的选项。所以每个都会在第一次调用时被缓存。此代码将仅在桌面客户端上运行（没有手机/平板电脑）。

好主意？这可能会引起什么问题？有没有一个好的方法来测试这是否有助于/损害性能？如果您能提出任何赞成/反对意见，我们将不胜感激。

如果需要更多信息，请告诉我
这是一把可以"摆弄"的小提琴。

谢谢！

底线：可能是个坏主意。

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

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

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

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

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

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

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

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

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

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

相关文章：