JQuery Inline Styling vs Class Toggling

Benchmark created on

Description

Performance test for jQuery inline styling changes vs class toggling

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
#button{
background: green;
position: absolute;
color: purple;
}

#button.toggledButton{
background : red;
top: 20px;
left: 10px;
color: blue;
border: 1px solid green;
}
</style>

<div id="button"></div>

Setup

var $button = $("#button");

Teardown


    if ($button.hasClass("toggledButton") {
        $button.removeClass("toggledButton");
      } else {
        $button.attr("style", "");
      }

Test runner

Ready to run.

Testing in
TestOps/sec
Inline-Stylings
$(function() {
  $button.css({
    "background": "red",
    "top": 20,
    "left": 10,
    "color": "blue",
    "border": "1px solid green"
  });
});
ready
Class Toggling
$(function() {
  $button.addClass("toggledButton");
});
ready

Revisions

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