Multiple .css Performance Versus Typical Class Manipulation in jQuery

JavaScript performance comparison

Test case created by Vaughn

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<style>
  .colored { background-color: red; font-weight: 900; color: green; }
</style>
<p id="test">
  Test
</p>
<p id="test2">
  Test
</p>
<p id="test3">
  Test
</p>

Preparation code output

Test

Test

Test

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
Multiple .css Object
$("#test").css({
  "background-color": "red",
  "font-weight": "900",
  "color": "green"
});
pending…
Multiple Separate .css
$("#test2").css("background-color", "red");
$("#test2").css("font-weight", "900");
$("#test2").css("color", "green");
pending…
.removeClass/.addClass
$("#test3").removeClass("colored");
$("#test3").addClass("colored");
pending…

You can edit these tests or add even more tests to this page by appending /edit to the URL.

Compare results of other browsers

0 comments

Add a comment