className VS classList Showdown (v25)

Revision 25 of this benchmark created on

Description

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

Preparation HTML

<style type="text/css">
  .blah{color: black;}
  .bleh{font-size: 300px}
  .foo{color:#F00;height:50px;opacity:0.3;} 
  .bar{color:#0F0;height:70px;opacity:0.5;font-size: 900px} 
  .baz{color:#00F;height:90px;opacity:0.7;font-weight: bold}
</style>
<div id="base" class="blah bleh">
    test 1
</div>

Setup

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

Test runner

Ready to run.

Testing in
TestOps/sec
classList (remove)
  node.classList.remove('bleh');
ready
className RegEx (remove)
node.className = node.className.replace(/(?:^|\s)bleh(?!\S)/, '');
ready
className replace (remove)
node.className = node.className.replace(' bleh', '');
ready

Revisions

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