className VS classList Showdown (v22)

Revision 22 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="">
    test 1
</div>

Setup

var node = document.getElementById('base');
    node.className = 'blah bleh';
    var i=0;

Test runner

Ready to run.

Testing in
TestOps/sec
classList (add)
if (i++ % 2 === 0) {
  node.classList.add('foo');
  node.classList.add('bar');
  node.classList.add('baz');
}

else {
  node.classList.remove('foo');
  node.classList.remove('bar');
  node.classList.remove('baz');

}
ready
className raw
if (i++ % 2 === 0) {
  node.className = 'blah bleh foo bar baz';
}

else {
  node.className = 'blah bleh';
}
ready

Revisions

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