vanilla css

Benchmark created by Vanilla Css on

Preparation HTML

<div id="tester"></div>

Setup

var div = document.getElementById('tester');
    var customStyles = {
    width: '50px',
    height: '50px',
    transform: 'translateX(10px) scale(.9)'
    };

Test runner

Ready to run.

Testing in
TestOps/sec
with type check
function css(el, styles, val) {
    if (typeof(styles) === 'string') {
      var tmp = styles;
      styles = {};
      styles[tmp] = val;
    }

    for (var prop in styles) {
      el.style[prop] = styles[prop];
    }
  }

css(div, customStyles);
ready
no type check
function css(el, styles, val) {
    for (var prop in styles) {
      el.style[prop] = styles[prop];
    }
  }

css(div, customStyles)
ready
Object.keys
function css(el, styles, val) {
Object.keys(styles).forEach(function (k) {
el.style[k]= styles[k];
});
}
ready
Keys Cached Styles
function css(el, styles, val) {
var cache = el.style;
Object.keys(styles).forEach(function (k) {
cache[k]= styles[k];
});
}
ready

Revisions

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

  • Revision 1: published by Vanilla Css on
  • Revision 2: published by Dustin on