Is it a good idea to cache the jQuery selection at the page level?
I am working on an intranet website where there is a lot of interaction with the homepage. The site uses jQuery extensively. So I thought about caching the jQuery selections on the first request and pulling them out of the cache for each subsequent request. (I also built an override if I want to force reselect).
Here's a basic piece of code I'm curious about:
( 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);
It will be used in the same way as a normal jQuery selection, but it checks if this selector already exists in the array cache
and, if so, just returns the results from there.
UPDATED EXAMPLE
$('#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');
}
There are about 20-30 different options in the code. Therefore, each will be cached on the first call. This code will only run on desktop clients (no phones / tablets).
A good idea? Any problems you might have? Is there a good way to check if this helps the job? Any pros and cons you can think of would be appreciated.
Let me know if more information is required.
Here's a fiddle to "tinker" with.
Thank!
source to share
I asked your question in jsperf and I found that uncached jQuery is faster.
http://jsperf.com/jquery-cache-array-test
because of this, I would recommend just using pure jQuery.
source to share
Bottom line: Possibly a bad idea.
You introduce complexity, which is most likely unnecessary and most likely just eats up memory.
If you are trying to speed up a selection that is being repeated, store the selection in a variable. When it is no longer needed, the garbage collector will remove it. For 99% of applications, there is as much caching as you need.
The big problem with your example is that the items you select will be stored indefinitely. Think about people who might work on this code later. Everyone can start using $$('....')
it because they see it in multiple places and it does exactly the same thing as $('....')
. Suddenly, you are storing thousands of DOM elements in memory for no reason.
Also, if the DOM changes and you don't know about it, the code you have in your cache is useless. But if you don't force it to reload, then you end up continuing to get cached code. Which, of course, introduces errors. To prevent this from happening, you will have to constantly reload the cache, which largely negates its usefulness.
You will only be better off following the good, solid coding patterns that already exist .. instead of programming a cache engine that becomes a bug magnet.
source to share