className VS classList Showdown (v19)

Revision 19 of this benchmark created on

Description

How much faster is classList.add/remove than className regex manipulation?

Preparation HTML

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

Setup

var node = document.getElementById('base');

Teardown


    node.className = '';

Test runner

Ready to run.

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

Revisions

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