Which Is Faster? - Modifying Css Property Or Adding Class In Jquery

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

I need to add special styles to each of the element

Solution 1:

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.

Solution 2:

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

Solution 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.

Solution 4:

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