classes vs inline styles

JavaScript performance comparison

Revision 3 of this test case created by Wout Mertens

Preparation code

<style>
.bold {
font-weight: bold;
}
.right {
text-align: right;
}
.green {
color: green;
}
.big {
font-size: 45px;
}
.italic {
font-style: italic;
}
.combined {
font-weight: bold;
text-align: right;
color: green;
font-size: 45px;
font-style: italic;
}
</style>
    

Preparation code output

<style> .bold { font-weight: bold; } .right { text-align: right; } .green { color: green; } .big { font-size: 45px; } .italic { font-style: italic; } .combined { font-weight: bold; text-align: right; color: green; font-size: 45px; font-style: italic; } </style>

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
Many classes (classlist)
var div = document.createElement('DIV');
div.classList.add("bold");
div.classList.add("right");
div.classList.add("green");
div.classList.add("big");
div.classList.add("italic");
document.body.appendChild(div);
div.offsetHeight; //render
document.body.removeChild(div);
pending…
Many classes (className)
var div = document.createElement('DIV');
div.className = "bold right green big italic";
document.body.appendChild(div);
div.offsetHeight; //render
document.body.removeChild(div);
pending…
Inline styles as an object
var div = document.createElement('DIV');
div.style = {
  fontWeight: "bold",
  textAlign: "right",
  color: "green",
  fontSize: "45px",
  fontStyle: "italic"
}
document.body.appendChild(div);
div.offsetHeight; //render
document.body.removeChild(div);
pending…
Individual inline styles
var div = document.createElement('DIV');
var style = div.style;
style.fontWeight = "bold";
style.textAlign = "right";
style.color = "green";
style.fontSize = "45px";
style.fontStyle = "italic";
document.body.appendChild(div);
div.offsetHeight; //render
document.body.removeChild(div);
pending…
Combined single class
var div = document.createElement('DIV');
div.className = "combined";
document.body.appendChild(div);
div.offsetHeight; //render
document.body.removeChild(div);
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