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, Feb 12 '12 at 03:48
[**Try it.**](http://jsperf.com/modifying-css-vs-adding-a-class) — icktoofay, Feb 12 '12 at 03:50
In what context do you have 100 elements? Why not use one element and use a jQuery background color animation (http://stackoverflow.com/questions/190560/jquery-animate-backgroundcolor) — Dan, Feb 12 '12 at 03:52
in a thought, adding classes gives you more versatility later — SpYk3HH, Feb 12 '12 at 03:56
@tandu Can you help me with a few tools that i can refer too.. i am not sure about these. — Masade, Feb 12 '12 at 04:24

gdoron · Answer 1 · 2012-02-12T09:31:41.673

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 '12 at 09:31

answered Feb 12 '12 at 03:49

gdoron

147,333
58
291
367

Agree, use whatever works best in a particular case. If you have just one property to set then use `css()` otherwise use `addClass()` – elclanrs Feb 12 '12 at 04:04
@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 – Masade Feb 12 '12 at 04:27
1

@Masade. 100 elements won't cause any slow down. read [this](http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/) article, though it's about css selectors, it's the same issue. – gdoron Feb 12 '12 at 09:28

score 5 · Accepted Answer · edited Feb 12 '12 at 04:07

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 '12 at 04:07

gdoron

147,333
58
291
367

answered Feb 12 '12 at 03:58

j08691

204,283
31
260
272

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. – Masade Feb 12 '12 at 04:19
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. – Explosion Pills Feb 12 '12 at 06:14

ShankarSangoli · Answer 3 · 2012-02-12T03:54:29.323

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.

score 1 · Answer 4 · edited Jan 11 '13 at 13:23

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

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

4 Answers4

Linked