javascript - 全局 JQuery 选择器缓存以提高性能

Question

我正在尝试提高我的移动 html 5 应用程序的 jquery 性能。我读了一些关于在全局对象中存储使用过的 jquery 选择器的指南。该应用程序相当大，我没想到会有很大的性能提升，但该应用程序的运行速度甚至更慢(大约 20%)。

我只使用 jquery 通过 Id 查找元素($("#id") 或 $_element.find("#id"))。 Id 是唯一的，所以我只对查找第一个元素感兴趣。我设法将所有 jquery 调用全局化在一个 cacheHandler 对象中，该对象按 id 存储所有选择器。缓存经常被清除，每个周期包含大约 30 个元素。

进行此更改后，应用程序运行速度变慢，因此我尝试了更多方法来提高性能:

• 缓存[id] = $(document.getElementById("id"))
• 缓存[id] = document.getElementById("id")
• 使用 hashCode 存储选择器:cache[id.hashCode()]

我想到了这个解决方案很慢，因为内存经常增加，因为整个 dom 及其所有子项都存储在缓存中。

所以我有了新的想法，将元素路径缓存为数组，例如

document.body.children[1].children[5].children[0] => [1,5,0]

因此，如果我再次需要该元素，我只需找到该元素一次，存储数组并查找路径。

这不会改变任何东西，并且每当我需要该元素时，所有想法都比调用 $("#id") 更慢。

如果需要，我可以提供更多信息或片段。

我很感谢每一个解释，为什么这会减慢我的应用程序的速度。

Answer 1

如果它是移动 html5 应用程序，为什么要使用 jQuery 作为选择器？看起来很多余。

我通常会这样做:

// helpers, since i hate typing document.get ..
function _id(e){ return document.getElementById(e); }    // single id
function _all(e){ return document.querySelectorAll(e); } // single elem
function _get(e){ return document.querySelector(e); }    // multiple elem

// loop helper (for changing or doing things to collection of elements)
function _for(e,f) { var i, len=e.length; for(i=0,l=len;i<l;i++){ f(e[i]); }}


// VARs (global)
var c = _id('c'), // main selector
    box = c.querySelectorAll('.box'), // boxes in 'c'
    elements = box.querySelectorAll('.element'); // elems in 'box'

// Change background-color for all .box using the _for -helper 
_for(elements, function(e){ e.style.backgroundColor = 'red'; }

我只存储元素的主要父元素，以便我可以在需要时查询 DOM(限制遍历所需的锁定)。在上面的示例变量中，我们可以想象 .box 中的某些内容。会改变几次或者 .box是一个缓慢的选择器。

请注意，全局变量会增加内存使用量，因为这些变量可能会干扰垃圾收集。另请注意，对象在某些浏览器中可能会变慢，如果它不会使您的代码变得太多，您应该更简单地存储它(无论如何您都不应该存储太多的全局变量......)。

编辑，jsPerf:

<强> http://jsperf.com/global-vs-local-vars-14mar2015

但请注意，这取决于您的选择以及您正在做的事情将会产生最大的影响。在 jsPerf 示例中，一旦开始从全局缓存的选择器中选择后代，即执行 box.find('p').css('color','blue') ，本地和全局之间的差异就会迅速减小。等等