Benchmark: Testing RAF - MeasureThat.net

HTML Preparation code:

<div id="app">
  Hello World
</div>

Script Preparation code:

var app = document.querySelector('#app');
function updateStyles(opts) {
  var list = opts.el.style.cssText.replace(/ /g, '').split(';');
  var result = {};
  var output = [];
  // Create our master list of existing properties.
  list.map(function chop(i) {
    if (i.length) {
      var item = i.split(':');
      result[item[0]] = item[1];
    }
  });

  // if we have an add object.
  if (opts.add) {
    // loop and add them to result.
    Object.keys(opts.add).forEach(function add(item) {
      result[item] = opts.add[item];
    });
  }

  // if we have a drop object.
  if (opts.drop) {
    // loop and remove them from result.
    opts.drop.forEach(function remove(item) {
      if (result[item]) {
        delete result[item];
      }
    });
  }

  // Concatenate our parameters.
  Object.keys(result).forEach(function cleanup(item) {
    output.push(item + ':' + result[item]);
  });

  // replace the style property on the element.
  opts.el.style.cssText = output.join(';');
}

Tests:

Normal el.style
app.style.height = '200px'; app.style.width = '200px'; app.style.minWidth = '200px'; app.style.backgroundColor = 'red';
el.style with RAF
window.requestAnimationFrame(function draw() { app.style.height = '300px'; app.style.width = '300px'; app.style.minWidth = '300px'; app.style.backgroundColor = 'blue'; });
New replacement of el.style with RAF
var newInlineStyles = { height: '500px', width: '500px', 'min-width': '500px', 'background-color': 'orange' }; window.requestAnimationFrame(function draw() { updateStyles({el: app, add: newInlineStyles}); });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Normal el.style
el.style with RAF
New replacement of el.style 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: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36

Browser/OS: Chrome 105 on Windows

View result in a separate tab

Test name	Executions per second
Normal el.style	640789.8 Ops/sec
el.style with RAF	1429910.0 Ops/sec
New replacement of el.style with RAF	1343070.0 Ops/sec

Testing RAF (version: 0)

Testing RAF against inline style definitions

Comparing performance of: Normal el.style vs el.style with RAF vs New replacement of el.style with RAF

Created: 7 years ago by: Guest

Jump to the latest result

Normal el.style

el.style with RAF

New replacement of el.style with RAF

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A