ClassList versus ClassName

JavaScript performance comparison

Revision 16 of this test case created by

Preparation code

<style>
.base{
display: inline-block;
width:300px;
height:300px;
 border:1px solid black;
}

.red {
color:red; 
}
.bold{
  font-weight:bold;
}
.upper{
  text-transform:uppercase;
}
</style>

<div id="dom" class="base">
    test
</div>
    

Preparation code output

<style> .base{ display: inline-block; width:300px; height:300px; border:1px solid black; } .red { color:red; } .bold{ font-weight:bold; } .upper{ text-transform:uppercase; } </style> <div id="dom" class="base"> test </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
classlist
var div = document.getElementById("dom");
div.className = "base";
div.classList.add("red");
div.classList.add("bold");
div.classList.add("upper");
pending…
classname
var div = document.getElementById("dom");
div.className = "base";
div.className += "red bold upper";
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

test