Selectors and performance

Is there any benefit to performance when I do the following in Mootools (or any framework, really)?:

var elem = $('#elemId');    
elem.addClass('someClass');        
elem.set('some attribute', 'some value');

etc, etc. Basically, I'm updating certain elements开发者_如何转开发 a lot on the DOM and I was wondering if creating a variable in memory and using that when needed was better than:

$('#elemId').addClass('someClass');    
$('#elemId').set('some attribute', 'some value');

The changes to $('#elemId') are all over the place, in various different functions.

Spencer ,

This is called caching and it is one of the best practices.

when you say

$('#elemId');

It will go and query the DOM everytime , so if you say

var elem = $('#elemId');

elem acts as a cache element and improves performance a lot.

This is manly useful in IE as it has memory leaks promblem and all

ready this document which is really good

http://net.tutsplus.com/tutorials/javascript-ajax/14-helpful-jquery-tricks-notes-and-best-practices/

It depends how you query the dom. Lookups by ID are extremely fast. Second most is css classes. So as long as you're doing it by only a single ID (not a complex selector containing an id), there shouldn't be much of a benefit. However, if you're using any other selector, caching is the way to go.

http://code.google.com/speed/page-speed/docs/rendering.html#UseEfficientCSSSelectors

https://developer.mozilla.org/en/Writing_Efficient_CSS

You first approach is faster then your second approach, because you "cache" the search on #elemId.

Meaning the calls to addClass and set don't require extra lookups in the DOM for your element.

However! You can link function calls:

$('#elemId').addClass('someClass').set('some attribute', 'some value');

Depending on your application caching or linking might work better, but definitely not identical sequential lookups in the same block.

Depending on the situation, caching can be as much as 99% faster then using a jQuery object every time. In the case you presented it will not make much difference. if you plan to use the selector many times, you should definitely cache the object as a variable so it doesn't get created everytime you run it.

A similar questions was answered at Does using $this instead of $(this) provide a performance enhancement?.

Check performance log http://jsperf.com/jquery-this-vs-this

You are considering using a local variable to cache a value of a potentially slow lookup.

How slow is the call itself? If it's fast, caching won't make much a difference. If it's slow, then cache at the first call. Selectors vary significantly in their cost-- just think about how the code must fine the element. If it's an ID, then the browser provides fast access, whereas classes and nodes my require full DOM scans. Check out profiling of jQuery (Sizzle) selectors to get a sense of these.

Can you chain the calls? Consider "chaining" method calls where possible. This provides the efficiency without introducing another variable.

For your example, I'd write:

$('#elemId').addClass('someClass').set('some attribute', 'some value');

How does the code read? Usually if the same method is going to be called multiple times, it is clearer to DRY it up, and use a local variable. The reader then understands the intent better-- you don't force them to scan all the jQuery calls to verify that they are the same. BTW, a fairly standard convention is to name jQuery variables starting with a $-- which is legal in Javascript-- as in

var $elem = $('#elem');
$elem.addClass('someClass');        

Hope this helps.