css-matrix3d-vs-transform-primitives

JavaScript performance comparison

Revision 13 of this test case created by

Preparation code

<div id="test"></div>
<script src="https://raw.github.com/camupod/CSSMatrix/browserified/CSSMatrix.js"></script>
      
<script>
Benchmark.prototype.setup = function() {
  var div = document.getElementById('test');
  var prefixes = ['', '-moz-', '-webkit-', '-o-', '-ms-'];
  var transform = 'transform';
  var vendorProp, prefix = '';
  if (!(transform in div.style)) {
    for (var i = 0; i < prefixes.length; ++i) {
      vendorProp = prefixes[i] + transform;
      if (vendorProp in div.style) {
        transform = vendorProp;
        prefix = prefixes[i];
        break;
      }
    }
  }
  var Matrix = window.WebKitCSSMatrix || window.MSCSSMatrix || window.CSSMatrix;
  div.style.width = div.style.height = '100px';
  div.style.backgroundColor = 'red';
  div.style[transform + '-style'] = 'preserve-3d';
  var arr1 = [];
  var arr2 = [];
  var a, b, c;
  for (var i = 0; i < 100; i++) {
    a = i;
    b = i * 2;
    c = i * 3;
    arr1.push(new Matrix().rotate(a, 0, 0).rotate(0, b, 0).rotate(0, 0, c).scale(a, b, c).translate(a, b, c) + '');
    arr2.push('rotateX(' + a + 'deg) rotateY(' + b + 'deg) rotateZ(' + c + 'deg) scale3d(' + a + ', ' + b + ', ' + c + ') translate3d(' + a + 'px, ' + b + 'px, ' + c + 'px)');
  }

};
</script>

Preparation code output

<div id="test"></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
matrix
for (var i = 0; i < 100; i++) {
  div.style[transform] = arr1[i];
}
pending…
transform-primitives
for (var i = 0; i < 100; i++) {
  div.style[transform] = arr2[i];
}
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