Inline style vs CSS class (v18)

Revision 18 of this benchmark created by Eric Wooley on

Preparation HTML

<style rel='stylesheet'>
  .foo { font-size: 13px; height: 90px; width:72.5px }
  .bar { font-size: 45px; height: 100px, with:23.7px}
</style>

Setup

var foo = { 'font-size': '13px', height: '90px', width:'72.5px' };
  var bar = { 'font-size': '45px', height: '100px', width:'23.7px'};
  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 color
node.style['font-size'] = foo['font-size'];
node.style.height = foo.height;
node.style.width = foo.width;

node.style['font-size'] = bar['font-size'];
node.style.height = bar.height;
node.style.width = bar.width;
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.