Inline style vs CSS class (v21)

Revision 21 of this benchmark created on

Preparation HTML

<style rel='stylesheet'>
  .test { color: #f66; }
</style>

Setup

var node_inline = document.createElement('div');
  node_inline.style.color = '#f66';
  node_inline.innerText = 'foobar';
  var node_css = document.createElement('div');
  node_css.className = 'test';
  node_css.innerText = 'foobar';

Teardown



            if (document.contains(node_inline)) {
    document.body.removeChild(node_inline);
  }
  if (document.contains(node_css)) {
    document.body.removeChild(node_css);
  }

Test runner

Ready to run.

Testing in
TestOps/sec
Inline style
document.body.appendChild(node_inline);
node_inline.clientWidth;
ready
CSS class
document.body.appendChild(node_css);
node_css.clientWidth;
ready

Revisions

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