vanilla css

JavaScript performance comparison

Test case created by Vanilla Css

Preparation code

<div id="tester"></div>
      
<script>
Benchmark.prototype.setup = function() {
  var div = document.getElementById('tester');
  var customStyles = {
  width: '50px',
  height: '50px',
  transform: 'translateX(10px) scale(.9)'
  };
  
  

};
</script>

Preparation code output

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

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/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);
pending…
no type check
function css(el, styles, val) {
    for (var prop in styles) {
      el.style[prop] = styles[prop];
    }
  }

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

Compare results of other browsers

Revisions

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

0 Comments