className VS classList Showdown (v6)

Revision 6 of this benchmark created on

Description

How much faster is classList.add className += ?

Preparation HTML

<style type="text/css">
  .foo { color:#F00; height:100px; opacity:0.3; } .bar { color:#0F0; height:200px;
  opacity:0.5; } .baz { color:#00F; height:300px; opacity:0.7; }
</style>
<div id="base" class="foo bar">
  <div class="foo bar baz">
    test 1
  </div>
  <span class="foo bar">
    test 2
  </span>
  <span class="baz">
    test 3
  </span>
</div>

Setup

var node = document.getElementById('base'),
        className = 'baz';

Teardown


    node.className = '';

Test runner

Ready to run.

Testing in
TestOps/sec
classList (add)
node.classList.add('foo');
 
ready
className += (add)
node.className += ' foo';
 
ready
className =
node.className = 'foo';
ready

Revisions

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