jQuery performance, .css or addClass

Question

I have a big jQuery code and I am thinking at speed performance of my functions. When an element is clicked (mousedown) i need to assign an image as background. I can do this by 2 ways:

$('#element li.class').css({"background":"someimageURL"});

or

$('#element li.class').addClass("someclass");

where "someclass" have the actual CSS background image. Witch function works better in this case.

Is there a way to test various functions speed?

Thank you

Linnealinnean

I don't think its wise to substitute one for the other. Using .css method hard codes the style to the DOM element and incase you want to get away with the style (eg. screen resolution changes), it would be real tricky. However .addClass and .removeClass methods handle that pretty well. – Ytterbium

Answer 1

I'm almost certain .addClass() would be the faster of the two. This involves essentially tacking on another classname to the element, whereas the alternative would require iterating through the elements styles and setting many explicit rules.

Setting a couple css rules via $.css() is likely nothing to worry about, but if you find yourself setting many, often, it's time to create a class and apply/remove that as needed.

I've extracted the logic of both methods into a single location for you to review if you like.

http://pastie.org/842738

Glabrate

Also not speed/performance related, it's a lot easier to change a CSS class than JS source code for changing a style later on ;) – Guardian

The implementation of "addClass" isn't as fancy as I would have thought. It does a lot of re-scanning of the class string when adding multiple classes. For short className values that's probably not a problem. – Skantze

Thanx Jhonathan. I will look at your link. I also think that addClass is faster. – Linnealinnean

So, you say "almost certain" without measuring anything? Shame. And, what really counts is the performance through redraw so you have to add the time it takes for it to reapply the cascading stylesheets when you add a class to a number of elements. And, you seem to be only looking at the jQuery part of the performance which is only part of the iceberg here. The fact remains that if you really want performance, you should get rid of the jQuery part entirely and do direct DOM manipulation. jQuery is a general tool that is fast to code in, but almost never the fastest way to do anything. – Albacore

Answer 2

Add class is absolutely faster, see this performance test of $.addClass() vs $.css() vs $.removeClass().addClass() vs plain js - http://jsperf.com/jquery-css-vs-addclass-speed/2

Dendriform

Your jsperf certainly shows how the most important thing to do if you want performance is to skip the jQuery part and code it directly to the DOM. Kudos for answer a performance question with actual measurements! I can't believe the accepted answer to this question did ZERO actual measurement. That's a shame in my book. You simply can't reliably answer a performance question without measurement. – Albacore