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.

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

回答1:

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

回答2:

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.

回答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.

回答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

来源：https://stackoverflow.com/questions/9246242/which-is-faster-modifying-css-property-or-adding-class-in-jquery