Inline style vs CSS class (v19)

Revision 19 of this benchmark created by Eric Wooley on

Preparation HTML

<style rel='stylesheet'>
  .foo {color: #FF0; background-color: #964 }
  .bar {color: #F0F, background-color: #B2C}
</style>

Setup

var foo = {color: '#FF0', 'background-color': '#964'};
  var bar = {color: '#F0F', 'background-color': '#B2C'};
  var node = document.createElement('div');
  node.innerHTML = 'test Text';
  document.body.appendChild(node);

Teardown



            document.body.removeChild(node);

Test runner

Ready to run.

Testing in
TestOps/sec
Inline style

node.style.color = foo.color;
node.style['background-color'] = foo['background-color'];

node.style.color = bar.color;
node.style['background-color'] = bar['background-color'];
ready
CSS class
node.className = 'foo';
node.className = 'bar';
ready
inline style object
node.style = foo;
node.style = bar;
ready

Revisions

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