classList v old way

JavaScript performance comparison

Revision 7 of this test case created by m_gol

Preparation code

<script src="http://code.jquery.com/jquery-git2.js">
</script>
<script src="https://dl.dropbox.com/u/10200888/jquery/jquery.js">
</script>
<script>
  $j = jQuery.noConflict();
</script>
<div id="a">
</div>
      
<script>
Benchmark.prototype.setup = function() {
  var a1 = $("#a"),
      a2 = $j("#a");
  
  var fooOdd = "foo9";
  var fooQuarter = "foo8";
  
  var classes = "foo0";
  var classesEven = "foo0";
  var classesQuarter = "foo0";
  
  var classesNum = 10;
  for (var i = 1; i < classesNum; i++) {
    classes += " foo" + i;
    if (i % 2 === 0) {
      classesEven += " foo" + i;
    }
    if (i % 4 === 0) {
      classesQuarter += " foo" + i;
    }
  }
  
  a1.get(0).className = classesEven;

};

Benchmark.prototype.teardown = function() {
  $("#a").attr("class", "");

};
</script>

Preparation code output

<script src="https://dl.dropbox.com/u/10200888/jquery/jquery.js"> </script> <script> $j = jQuery.noConflict(); </script> <div id="a"> </div>

Test runner

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

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
addClass: many, className
a1.addClass(classes);
pending…
addClass: many, classList
a2.addClass(classes);
pending…
removeClass: many, className
a1.removeClass(classesQuarter);
pending…
removeClass: many, classList
a2.removeClass(classesQuarter);
pending…
hasClass: className
a1.hasClass(fooOdd);
pending…
hasClass: classList
a2.hasClass(fooOdd);
pending…
addClass: single, className
a1.addClass(fooOdd);
pending…
addClass: single, classList
a2.addClass(fooOdd);
pending…
removeClass: single, className
a1.removeClass(fooQuarter);
pending…
removeClass: single, classList
a2.removeClass(fooQuarter);
pending…

Compare results of other browsers

Revisions

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

0 Comments