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.

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.

• javascript
• jquery
• performance
• optimization
• rendering

• 4 Why don't you benchmark it and find out? I can't imagine it would make enough of a difference to matter. – Explosion Pills Commented Feb 12, 2012 at 3:48
• 7 Try it. – icktoofay Commented Feb 12, 2012 at 3:50
• 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 Commented Feb 12, 2012 at 3:52
• in a thought, adding classes gives you more versatility later – 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 Commented Feb 12, 2012 at 4:24

4 Answers 4

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.

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

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.

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