Vector Operations - Prototype vs Typed Array vs Array vs Inline

JavaScript performance comparison

Revision 4 of this test case created

Info

Comparison of vector operations using the prototype, arrays, typed arrays and inline versions of the above.

Preparation code

``<script src="https://rawgithub.com/toji/gl-matrix/v2.2.0/dist/gl-matrix.js"></script><script>    // vector prototype    function vecA( x, y ) {        this.x = x || 0;        this.y = y || 0;    }    vecA.prototype = {        set: function( x, y ) { this.x = x; this.y = y; },        add: function( v ) { this.x += v.x; this.y += v.y; },        sub: function( v ) { this.x -= v.x; this.y -= v.y; },        mul: function( f ) { this.x *= f; this.y *= f; }    };    // vector typed array (thanks @mraleph for the 32 vs 64 tips)    var vecB = {        create: function( x, y ) { return new Float64Array([ x || 0, y || 0 ]); },        set: function( a, x, y ) { a[0] = x; a[1] = y; },        add: function( a, b ) { a[0] += b[0]; a[1] += b[1]; },        sub: function( a, b ) { a[0] -= b[0]; a[1] -= b[1]; },        mul: function( a, f ) { a[0] *= f; a[1] *= f; }    };    // vector regular array    var vecC = {        create: function( x, y ) { return [ x || 0, y || 0 ]; },        set: function( a, x, y ) { a[0] = x; a[1] = y; },        add: function( a, b ) { a[0] += b[0]; a[1] += b[1]; },        sub: function( a, b ) { a[0] -= b[0]; a[1] -= b[1]; },        mul: function( a, f ) { a[0] *= f; a[1] *= f; }    };    (function () { }).prototype = vec2;    Benchmark.prototype.setup = function() {        // create vectors (only testing ops, don't care about construction)        var posA = new vecA( 1.2, 2.3 );        var velA = new vecA( 3.4, 4.5 );        var posB = vecB.create( 1.2, 2.3 );        var velB = vecB.create( 3.4, 4.5 );        var posC = vecC.create( 1.2, 2.3 );        var velC = vecC.create( 3.4, 4.5 );        var posD = { x: 1.2, y: 2.3 };        var velD = { x: 3.4, y: 4.5 };        var posE = new Float64Array([ 1.2, 2.3 ]);        var velE = new Float64Array([ 3.4, 4.5 ]);        var posF = [ 1.2, 2.3 ];        var velF = [ 3.4, 4.5 ];        var posG = vec2.fromValues( 1.2, 2.3 );        var velG = vec2.fromValues( 3.4, 4.5 );    }</script>``

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
Prototype
``velA.set(1.3, 2.4);velA.mul(0.567);posA.add(velA);velA.sub(posA);``
pending…
Float64Array
``vecB.set(velB, 1.3, 2.4);vecB.mul(velB, 0.567);vecB.add(posB, velB);vecB.sub(velB, posB);``
pending…
Array
``vecC.set(velC, 1.3, 2.4);vecC.mul(velC, 0.567);vecC.add(posC, velC);vecC.sub(velC, posC);``
pending…
Object (inline)
``velD.x = 1.3; velD.y = 2.4;velD.x *= 0.567; velD.y *= 0.567;posD.x += velD.x; posD.y += velD.y;velD.x -= posD.x; velD.y -= posD.y;``
pending…
Float64Array (inline)
``velE[0] = 1.3; velE[1] = 2.4;velE[0] *= 0.567; velE[1] *= 0.567;posE[0] += velE[0]; posE[1] += velE[1];velE[0] -= posE[0]; velE[1] -= posE[1];``
pending…
Array (inline)
``velF[0] = 1.3; velF[1] = 2.4;velF[0] *= 0.567; velF[1] *= 0.567;posF[0] += velF[0]; posF[1] += velF[1];velF[0] -= posF[0]; velF[1] -= posF[1];``
pending…
GL Matrix
``vec2.set( velG, 1.3, 2.4 );vec2.scale( velG, velG, 0.567 );vec2.add( posG, posG, velG );vec2.subtract( velG, velG, posG );``
pending…

Revisions

You can edit these tests or add even more tests to this page by appending `/edit` to the URL. Here’s a list of current revisions for this page: