Run results for: Testing RAF

Run details:

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

Browser: Chrome 50

Operating system: Mac OS X 10.10.5

Device Platform: Other

Date tested: 7 years ago

Test name	Executions per second
Normal el.style	586840.1 Ops/sec
el.style with RAF	757822.1 Ops/sec
New replacement of el.style with RAF	684393.2 Ops/sec

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

Run results for: Testing RAF

Testing RAF against inline style definitions

Normal el.style

el.style with RAF

New replacement of el.style with RAF