全局JQuery Selector缓存可提高性能

Question

我试图提高我的移动html 5应用程序的jquery性能。 我阅读了一些有关在全局对象中存储使用过的jquery选择器的指南。 该应用程序相当大，我没想到性能会大大提高，但是该应用程序的运行速度甚至更低（例如20％）。

我只使用jquery通过ID（$（“＃id”）或$ _element.find（“＃id”））查找元素。 ID是唯一的，因此我只对找到第一个元素感兴趣。 我设法全球化了cacheHandler对象中的所有jquery调用，该对象按ID存储所有选择器。 缓存会经常清除，每个周期包含大约30个元素。

进行此更改后，应用程序的运行速度变慢了，因此我尝试了一些其他事情来提高性能：

• cache [id] = $（document.getElementById（“ id”））
• cache [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将更改数次， 或者 .box是一个缓慢的选择器。

请注意，全局变量会增加内存使用量，因为这些变量会干扰垃圾回收。 还要注意，对象在某些浏览器中可能会变慢，并且如果它不会使您的代码膨胀得太多，您应该改为更简单地存储它（无论如何，您不应该存储太多的全局变量。。。）。

编辑jsPerf：

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

但是请注意，根据您的选择和所从事的工作，所产生的影响最大。 在jsPerf示例中，本地人和全局人之间的差异一开始就从全局缓存的选择器中选择后代，然后迅速减小，即执行box.find('p').css('color','blue')等。

Answer 2

这已经很老了，但我们永远不知道，有人可以阅读这篇文章。

jQuery基于较小的Sizzle： https ： //sizzlejs.com/

您最终只能包含此库。 我不建议为此目的维护您自己的代码。 它已经由其他人完成和维护。