Geek Answers Handbook

Selectors and Performance

Is there any performance benefit 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 update some elements in the DOM a lot, and I was wondering if it would be better to create a variable in memory in memory and use it if necessary:

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

Changes to $('#elemId') everywhere in different functions.

+4
source share
5 answers

Spencer

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

when you say

 $('#elemId');

It will access the DOM every time, so if you say

 var elem = $('#elemId');

elem acts as a cache element and significantly improves performance.

This is useful for IE as it has memory gaps and that’s it.

ready this document which is really good

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

+5
source

It depends on how you request dom. Search by identifier is very fast. Secondly, these are css classes. Therefore, while you do this with just one ID (not a complex selector containing an identifier), there should not be much use. However, if you use 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

+2
source

You first come up faster than your second approach, because you "cache" the search on #elemId .

The value of the addClass and set calls does not require additional searches in the DOM for your element.

But! You can bind function calls:

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

Depending on your application, caching or linking may work better, but definitely not the same sequential search in a single block.

+1
source

Depending on the situation, caching can be 99% faster than every time using a jQuery object. In case you presented it, it will not matter much. if you plan to reuse the selector, you must always cache the object as a variable so that it is not created every time it is run.

Answers to similar questions were received in Does $ this instead of $ (this) use performance enhancement? .

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

0
source

You plan to use a local variable to cache a potentially slow search value.

How slow is the challenge itself? If fast, caching will not make much difference. If it is slow, then the cache on the first call. Selectors vary widely in cost - just think about how the code should clean the element. If this is an identifier, then the browser provides quick access, while classes and nodes require a full DOM scan. Check out jQuery (Sizzle) selector profiling to understand them.

Can you connect the challenges? . Use the chaining method whenever possible. This ensures efficiency without introducing another variable.

In your example, I would write:

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

How is the code read? Usually, if the same method is called several times, it is more understandable by DRY and uses a local variable. Then the reader understands the intention better - you do not force them to scan all jQuery calls to make sure they are the same. BTW, a pretty standard convention is the name of jQuery variables starting with $ - which is legal in Javascript - as in

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

Hope this helps.

-1
source

More articles:


All Articles