Run results for: Testing RAF

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.98 Safari/537.36

Browser: Chrome 54

Operating system: Mac OS X 10.11.4

Device Platform: Other

Date tested: 7 years ago

Test name	Executions per second
Normal el.classList.add	2765345.0 Ops/sec
el.classList.add with RAF	32366.5 Ops/sec
New replacement of className with RAF	32697.5 Ops/sec

HTML Preparation code:

<style>
.target {
  height: 50px;
  width: 50px;
  background-color: green;
}
.orange {
  height: 100px;
  width: 100px;
  background-color: orange;
}
.blue {
  height: 300px;
  width: 300px;
  background-color: blue;
}
.red {
  height: 500px;
  width: 500px;
  background-color: red;
}
</style>
<div id="app" class="target">
  Hello World
</div>

Script Preparation code:

var app = document.querySelector('#app');
function updateClasses(opts) {
  var existing = opts.el.className.split(' ');
  // Add the new classes and the existing as a single array.
  var result = opts.add && existing.concat(opts.add) || existing;
  var uniqueNames = [];

  // if we have a drop property.
  if (opts.drop) {
    opts.drop.forEach(function remove(i) {
      if (result.indexOf(i) > -1) {
        result.splice(result.indexOf(i), 1);
      }
    });
  }

  // loop and remove duplicates.
  result.forEach(function cleanUp(i) {
    if (result.indexOf(i) > -1) {
      if (uniqueNames.indexOf(i) === -1) {
        uniqueNames.push(i);
      }
    }
  });

  // replace the classes on the element.
  opts.el.className = uniqueNames.join(' ');
}

Tests:

Normal el.classList.add
app.classList.add('orange');
el.classList.add with RAF
window.requestAnimationFrame(function draw() { app.classList.add('red'); });
New replacement of className with RAF
window.requestAnimationFrame(function draw() { updateClasses({el: app, add: ['blue']}); });

Run results for: Testing RAF

Testing RAF against inline style definitions

Normal el.classList.add

el.classList.add with RAF

New replacement of className with RAF