Inline style vs CSS class (v20)

Revision 20 of this benchmark created by Alec on

Preparation HTML

<style rel='stylesheet'>
  .foo {width: 10px; height: 10px;}
  #foo {width: 10px; height: 10px;}
</style>

Test runner

Ready to run.

Testing in
TestOps/sec
Inline style
var node = document.createElement('div');
document.body.appendChild(node);
node.style.width = '10px';
node.style.height = '10px';
node.offsetHeight;
node.style.height = '20px';
node.offsetHeight;
document.body.removeChild(node);
ready
CSS class
var node = document.createElement('div');
document.body.appendChild(node);
node.className = 'foo';
node.offsetHeight;
node.style.height = '20px';
node.offsetHeight;
document.body.removeChild(node);
ready
inline 2
var node = document.createElement('div');
document.body.appendChild(node);
node.style.height = '10px';
node.offsetHeight;
node.style.height = '20px';
node.offsetHeight;
document.body.removeChild(node);
ready
id
var node = document.createElement('div');
document.body.appendChild(node);
node.id = 'foo';
node.offsetHeight;
node.style.height = '20px';
node.offsetHeight;
document.body.removeChild(node);
ready

Revisions

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