classes vs inline styles

Benchmark created by Marcin on

Preparation HTML

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

</style>

Test runner

Ready to run.

Testing in
TestOps/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);
ready
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);
ready
Many 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);
ready

Revisions

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