DOMMatrix perf

JavaScript performance comparison

Revision 7 of this test case created by

Preparation code


      
      <script>
Benchmark.prototype.setup = function() {
  function multiply(a, b) {
    var temparray = [];
    temparray[0] = a[0] * b[0] + a[1] * b[2];
    temparray[1] = a[0] * b[1] + a[1] * b[3];
    temparray[2] = a[2] * b[0] + a[3] * b[2];
    temparray[3] = a[2] * b[1] + a[3] * b[3];
    temparray[4] = a[4] * b[0] + a[5] * b[2] + b[4];
    temparray[5] = a[4] * b[1] + a[5] * b[3] + b[5];
  
    b[0] = temparray[0];
    b[1] = temparray[1];
    b[2] = temparray[2];
    b[3] = temparray[3];
    b[4] = temparray[4];
    b[5] = temparray[5];
    return b;
  }
  
  function rotate(a, angle) {
    angle *= Math.PI / 180;
    var rotateArray = [];
    rotateArray[0] = Math.cos(angle);
    rotateArray[1] = Math.sin(angle);
    rotateArray[2] = -Math.sin(angle);
    rotateArray[3] = Math.cos(angle);
    rotateArray[4] = 0;
    rotateArray[5] = 0;
  
    return multiply(rotateArray, a);
  }
  
  function scale(a, s) {
    a[0] *= s;
    a[1] *= s;
    a[2] *= s;
    a[3] *= s;
    a[4] *= s;
    a[5] *= s;
  
    return a;
  }
  
  function translate(a, x, y) {
    a[4] += a[0] * x + a[2] * y;
    a[5] += a[1] * x + a[3] * y;
  
    return a;
  }
  
  var multiplyArray = new Float32Array(6);
  
  function multiplyFA(a, b) {
    multiplyArray[0] = a[0] * b[0] + a[1] * b[2];
    multiplyArray[1] = a[0] * b[1] + a[1] * b[3];
    multiplyArray[2] = a[2] * b[0] + a[3] * b[2];
    multiplyArray[3] = a[2] * b[1] + a[3] * b[3];
    multiplyArray[4] = a[4] * b[0] + a[5] * b[2] + b[4];
    multiplyArray[5] = a[4] * b[1] + a[5] * b[3] + b[5];
  
    b[0] = multiplyArray[0];
    b[1] = multiplyArray[1];
    b[2] = multiplyArray[2];
    b[3] = multiplyArray[3];
    b[4] = multiplyArray[4];
    b[5] = multiplyArray[5];
    return b;
  }
  
  var rotateArray = new Float32Array(6);
  
  function rotateFA(a, angle) {
    angle *= Math.PI / 180;
  
    rotateArray[0] = Math.cos(angle);
    rotateArray[1] = Math.sin(angle);
    rotateArray[2] = -Math.sin(angle);
    rotateArray[3] = Math.cos(angle);
    rotateArray[4] = 0;
    rotateArray[5] = 0;
  
    return multiplyFA(rotateArray, a);
  }
  
  var ctx = document.createElement('canvas').getContext('2d');
  var gl = document.createElement('canvas').getContext('webgl');

};
</script>

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
Native
    var m = new DOMMatrix();
    m.a = 3;
    m.b = -4;
    m.c = 5;
    m.d = -6;
    m.e = 7;
    m.f = -8;

    var x = 100000;
    while (x--) {
      m.translateSelf(10, -10);
      m.rotateSelf(5);
    }
pending…
JS equivalent
    var n = [];
    n[0] = 3;
    n[1] = -4;
    n[2] = 5;
    n[3] = -6;
    n[4] = 7;
    n[5] = -8;

    var x = 100000;
    while (x--) {
      n = translate(n, 10, -10);
      n = rotate(n, 5);
    }
pending…
JS equivalent + DOM access
    var n = [];
    n[0] = 3;
    n[1] = -4;
    n[2] = 5;
    n[3] = -6;
    n[4] = 7;
    n[5] = -8;

    var x = 100000;
    while (x--) {
      n = translate(n, 10, -10);
      n = rotate(n, 5);
      ctx.setLineDash(n);
    }
pending…
JS equivalent with floatArray
    var n = new Float32Array(6);
    n[0] = 3;
    n[1] = -4;
    n[2] = 5;
    n[3] = -6;
    n[4] = 7;
    n[5] = -8;

    var x = 100000;
    while (x--) {
      n = translate(n, 10, -10);
      n = rotateFA(n, 5);
    }
pending…
JS equivalent with floatArray + DOM access
    var n = new Float32Array(6);
    n[0] = 3;
    n[1] = -4;
    n[2] = 5;
    n[3] = -6;
    n[4] = 7;
    n[5] = -8;

    var x = 100000;
    while (x--) {
      n = translate(n, 10, -10);
      n = rotateFA(n, 5);
      gl.uniform2fv(null, n);
    }
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