Class vs. Style (v6)

Revision 6 of this benchmark created on

Preparation HTML

<style>
  .one { background: red; width: 100px; height: 100px; }
  .two { background: blue; width: 50px; height: 50px; }
</style>
<div id="candidate"></div>

Setup

var candidate = document.getElementById('candidate');

Test runner

Ready to run.

Testing in
TestOps/sec
Class (className)
candidate.className = 'one';
candidate.className = 'two';
ready
Class (setAttribute)
candidate.setAttribute('class', 'one');
candidate.setAttribute('class', 'two');
ready
Style
candidate.style.background = 'red';
candidate.style.width = '100px';
candidate.style.height = '100px';

candidate.style.background = 'blue';
candidate.style.width = '50px';
candidate.style.height = '50px';
ready
Style (setAttribute)
candidate.setAttribute('style', 'background: red; width: 100px; height: 100px;');
candidate.setAttribute('style', 'background: blue; width: 50px; height: 50px;');
ready
Style cached
var style = candidate.style;
style.background = 'red';
style.width = '100px';
style.height = '100px';

style.background = 'blue';
style.width = '50px';
style.height = '50px';
ready

Revisions

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