全局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/

您最終只能包含此庫。 我不建議為此目的維護您自己的代碼。 它已經由其他人完成和維護。