Which is faster? - modifying css property or adding class in jquery

Question

I have about 100 elements in like and am trying to create an animation with jquery.

<div class="box" id="a1"></div>

I need to add special styles to each of the elements based on a function.

which of them is rendered faster in browser:

adding css property

$(this).css({'background-color':'#000'})

or adding class

$(this).addClass("style1")

Updated Few more things i wish to add:

Right now it has 100 elements and am adding them by jquery.
To create randomness i need to create about 25 styles - am doing it by javascript
should i also add size of stylesheet to the same to get exact benchmarks.

Why don't you benchmark it and find out? I can't imagine it would make enough of a difference to matter. — Explosion Pills
– Explosion Pills, Commented Feb 12, 2012 at 3:48
In what context do you have 100 elements? Why not use one element and use a jQuery background color animation (stackoverflow.com/questions/190560/…) — Dan
– Dan, Commented Feb 12, 2012 at 3:52
in a thought, adding classes gives you more versatility later — SpYk3HH
– SpYk3HH, Commented Feb 12, 2012 at 3:56
@tandu Can you help me with a few tools that i can refer too.. i am not sure about these. — Masade
– Masade, Commented Feb 12, 2012 at 4:24

gdoron · Accepted Answer · 2012-02-12 09:31:41Z

9

which of them is rendered faster in browser:

Depends on the browser. you should do some tests if it's interesting you.

Anyway it's not important and very unlikely to be the bottle-neck of your website.
Avoid micro-optimization, "premature optimization is the root of all evil", you're wasting your time.

edited Feb 12, 2012 at 9:31

answered Feb 12, 2012 at 3:49

gdoron

151k59 gold badges302 silver badges376 bronze badges

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

3 Comments

elclanrs Over a year ago

Agree, use whatever works best in a particular case. If you have just one property to set then use css() otherwise use addClass()

Masade Over a year ago

@gdoron like i am feeling its rendered very slow in my chrome 16.0, thats the reason i posted the question... i need to add more than just background

gdoron Over a year ago

@Masade. 100 elements won't cause any slow down. read this article, though it's about css selectors, it's the same issue.

gdoron · Accepted Answer · 2012-02-12 04:07:06Z

5

According to jsPerf, addClass is noticeably faster by about 50%.

Here's the jsPerf data for Chrome but in my tests it was about the same using Firefox:

$('#a1').css({ 'background-color': '#000' }) 82,043 ±0.21% 48% slower

$('#a1').addClass("style1") 158,876 ±0.83% fastest

edited Feb 12, 2012 at 4:07

gdoron

151k59 gold badges302 silver badges376 bronze badges

answered Feb 12, 2012 at 3:58

j08691

209k33 gold badges269 silver badges281 bronze badges

2 Comments

Masade Over a year ago

thanks for benchmarks... would i need to compare it also with the size of style sheet too... while i am doing it with javascript i am able to automate the script. for css i need to add about 25 classes.

Explosion Pills Over a year ago

jsPerf only tests the amount of operations js that can be run in some period of time. It doesn't take into account the rendering of the style, which may be faster by the css method.

ShankarSangoli · Accepted Answer · 2012-02-12 03:54:29Z

3

Adding a class to the parent of all these 100 elements will be faster and defining that class in the css file or page.

.style1 .box{
   //define style here
}

This way you just have to manipulate the class of only one element and it is definitely faster than modifying each of the 100 element's style using css method.

How fast? It all depends on the number of lines of code executed in each of the operations which is again dependent on browser to browser.

If you go with my approach it will definitely be faster.

edited Feb 12, 2012 at 3:54

answered Feb 12, 2012 at 3:49

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

Comments

Anujith · Accepted Answer · 2013-01-11 13:23:43Z

1

You can even consider using a style tag.

It could turn to be very fast. For example if you have a lot of elements to modify, let's say 100 elements, as you write your css only once, the DOM will be changed only once.

HTML:

<style type="text/css" id="specialStyle"></style>
<div class="oneHundredElements" id="box1"/>
<div class="oneHundredElements" id="box2"/>
...
<div class="oneHundredElements" id="box100"/>

SCRIPT:

<script>
    var css = '.oneHundredElements {background-color:#000;}';
    $('#specialStyle').html(css);
</script>

http://jsperf.com/foox/4

edited Jan 11, 2013 at 13:23

Anujith

9,3686 gold badges36 silver badges48 bronze badges

answered Jan 11, 2013 at 13:01

Libert KHE

5405 silver badges22 bronze badges

Collectives™ on Stack Overflow

Which is faster? - modifying css property or adding class in jquery

4 Answers 4

3 Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related