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

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. — thethakuri
– thethakuri, Commented Jul 23, 2015 at 3:03

Sampson · Accepted Answer · 2010-02-25 18:24:14Z

16

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

answered Feb 25, 2010 at 18:24

Sampson

269k76 gold badges546 silver badges570 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

casraf Over a year ago

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 ;)

Pointy Over a year ago

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.

Mircea Over a year ago

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

jfriend00 Over a year ago

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.

Justin McCammon · Accepted Answer · 2014-01-15 23:09:43Z

11

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

answered Jan 15, 2014 at 23:09

Justin McCammon

3084 silver badges9 bronze badges

1 Comment

jfriend00 Over a year ago

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.

Collectives™ on Stack Overflow

jQuery performance, .css or addClass

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related