Does saving selected / found items in a variable preserve performance?

Question

I created a jQuery plugin to change my navigation. Unfortunately, I have to have access and change almost all child elements, such as <ul> , <li> , <a> , etc. Then these items are needed between 1 and 4 times.

Should I store them all in variables or should I access them, for example, $('.my-nav').find('li') or $('.my-nav').find('li') , when it is necessary?

5 variables seem to be a waste of memory, possibly 25 lines of code. But I do not know if this is an acceptable compromise for more performance.

I created a script to illustrate what is meant: http://jsfiddle.net/Yj35Q/2/

Answer 1

It is always good practice to cache your nodes. You can also compare yourself using http://jsperf.com/

You do not need to worry about how many storage space variables are required if you are not storing a massive DOM tree or anything like that. Much more relevant is the amount of work that the JS engine must do to identify nodes.

EDIT
or even better, you can find an existing test case that someone else created http://jsperf.com/ns-jq-cached/4

Answer 2

Of course, you need to cache DOM elements if necessary, regardless of whether you use jQuery or not.

But this question made me think that maybe we should have a plugin to help with this. I searched around and could not find it.

So, I wrote one very fast. This is the lazy jQuery selector loader ...

 (function($){ var cachedObjects = new Array(); $.lazy = function(selector) { if (typeof selector != "string" || arguments.length > 1) return $.apply(this, arguments); var o = cachedObjects[selector]; if (o == undefined) { o = $(selector); cachedObjects[selector] = o; } return o; }; })(jQuery); 

You would use it like that ...

 $.lazy('.my-nav').show(); 

Let me know if I missed something. But I believe that it would be useful to use it when the elements you select are static and are never added or deleted dynamically.

UPDATE

I modified the code to make it more efficient. And I added the string to return $(selector) when the selector is not a string. Thus, caching will only work when the selector is a string.

UPDATE # 2

Now it will be return $.apply(this, arguments) when you are not just passing the string, for the jfriend00 clause.

Answer 3

As part of the same function, I will cache the DOM search results in a local variable, so I will never have to perform the same DOM search more than once in the same function. For most functions, this is not needed, but it is easy and safe to put the result in a local variable only for the duration of the function, so I consider it a good habit.

I usually DO NOT cache DOM nodes in global variables simply because I try to avoid global variables, and there is rarely a performance issue for getting a DOM node when necessary for a particular function. Another reason to avoid DOM references in global variables is that if a specific DOM node is removed from the DOM, and you intend to collect it, if there is a link to it in a global variable, the DOM node will not be garbage collected and may lead to a memory leak. .

There are cases when I repeatedly look at the same DOM node (for example, by timer), where I will cache the DOM node in a non-global variable when closing the function, and then use this variable locally, But I find cases when it is necessary to to be rare.