Vector Operations - Prototype vs Float32Array vs Array vs Inline

JavaScript performance comparison

Test case created by Justin

Info

Testing the speed of some basic vector operations using the prototype, arrays, typed arrays and inline objects / typed arrays.

Preparation code

<script>

Benchmark.prototype.setup = function() {

    // 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

    var vecB = {
        create: function( x, y ) { return new Float32Array([ 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; }
    };

    // 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 Float32Array([ 1.2, 2.3 ]);
    var velE = new Float32Array([ 3.4, 4.5 ]);

    var posF = [ 1.2, 2.3 ];
    var velF = [ 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…
Typed Array
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…
Inline Object
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…
Inline Typed Array
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…
Inline Array
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…

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. Here’s a list of current revisions for this page:

0 comments

Add a comment