css-matrix3d-vs-transform-primitives personal test

JavaScript performance comparison

Revision 5 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];
  console.log(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