classes vs inline styles (v4)

Revision 4 of this benchmark created by Oleg on

Preparation HTML

<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

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
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);
ready
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);
ready
Combined single class
var div = document.createElement('DIV');
div.className = "combined";
document.body.appendChild(div);
div.offsetHeight; //render
document.body.removeChild(div);
ready
Inline styles as a style attribute.
var div = document.createElement('DIV');
var style = 'font-weight: bold;' +
  'text-align: right;' +
  'color: green;' +
  'font-size: 45px;' +
  'font-style: italic;'
div.setAttribute('style', style)
document.body.appendChild(div);
div.offsetHeight; //render
document.body.removeChild(div);
ready
Inline styles as a cssText
var div = document.createElement('DIV');
var style = 'font-weight: bold;' +
  'text-align: right;' +
  'color: green;' +
  'font-size: 45px;' +
  'font-style: italic;'
div.style.cssText = style;
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.