Benchmark: Testing RAF - MeasureThat.net

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']}); });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Normal el.classList.add
el.classList.add with RAF
New replacement of className with RAF

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: 7 years ago)

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/OS: Chrome 54 on Mac OS X 10.11.4

View result in a separate tab

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

Testing RAF (version: 0)

Testing RAF against inline style definitions

Comparing performance of: Normal el.classList.add vs el.classList.add with RAF vs New replacement of className with RAF

Created: 7 years ago by: Guest

Jump to the latest result

Normal el.classList.add

el.classList.add with RAF

New replacement of className with RAF

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A