JavaScript Module Pattern Test Cases

JavaScript performance comparison

Revision 2 of this test case created by Esailija

Info

I've started this performance page because we have been facing memory issues with an App. I have used as a base information from the article: http://coding.smashingmagazine.com/2012/11/05/writing-fast-memory-efficient-javascript/ and then added extra posibilities to implement a better or worst pattern. I hope to see improvements.

Follow Me on Twitter @efsandino

Preparation code

<script>        
// Implementation of a JS Class with Prototype Pattern
Klass1 = function () {
    this.val = 0;
}
Klass1.prototype.foo = function () {
    log('foo');
}
Klass1.prototype.bar = function () {
    log('bar');
}
Klass1.prototype.fn = function (val) {
    this.val = val + this.val;
}
Klass1.prototype.method1 = function () {};
Klass1.prototype.method2 = function () {};
Klass1.prototype.method3 = function () {};
Klass1.prototype.method4 = function () {};
Klass1.prototype.method5 = function () {};
Klass1.prototype.method6 = function () {};
Klass1.prototype.method7 = function () {};
Klass1.prototype.method8 = function () {};
Klass1.prototype.method9 = function () {};
Klass1.prototype.method10 = function () {};
Klass1.prototype.method11 = function () {};


// Implementation of a JS Class with Module Pattern
Klass2 = function () {
    var val = 0;
    var foo = function () {
        log('foo');
    },
        bar = function () {
            log('bar');
        };

    var fn2 = function (_val) {
        val = _val + val;
    }
    var method1 = function () {};
    var method2 = function () {};
    var method3 = function () {};
    var method4 = function () {};
    var method5 = function () {};
    var method6 = function () {};
    var method7 = function () {};
    var method8 = function () {};
    var method9 = function () {};
    var method10 = function () {};
    var method11 = function () {};

    return {
        foo: foo,
        bar: bar,
        fn: fn2,
        method1: method1,
        method2: method2,
        method3: method3,
        method4: method4,
        method5: method5,
        method6: method6,
        method7: method7,
        method8: method8,
        method9: method9,
        method10: method10,
        method11: method11
    }
}


// Implementation of a JS Class with Module Pattern + Cached Functions
var FooFunction = function () {
    log('foo');
};
var BarFunction = function () {
    log('bar');
};


var c3method1 = function () {};
var c3method2 = function () {};
var c3method3 = function () {};
var c3method4 = function () {};
var c3method5 = function () {};
var c3method6 = function () {};
var c3method7 = function () {};
var c3method8 = function () {};
var c3method9 = function () {};
var c3method10 = function () {};
var c3method11 = function () {};

var fn3 = function (val) {
    this.val = val + this.val;
}

Klass3 = function () {
    return {
        val: 0,
        foo: FooFunction,
        bar: BarFunction,
        fn: fn3,
        c3method1: c3method1,
        c3method2: c3method2,
        c3method3: c3method3,
        c3method4: c3method4,
        c3method5: c3method5,
        c3method6: c3method6,
        c3method7: c3method7,
        c3method8: c3method8,
        c3method9: c3method9,
        c3method10: c3method10,
        c3method11: c3method11
    }
}

// Implements of JS Class with Module Pattern + Dinamyc Functions
Klass4 = function () {
    var val = 0;



    return {
        foo: function () {
            log('foo');
        },
        bar: function () {
            log('bar');
        },
        fn: function (_val) {
            val = _val + val
        },
        method1: function(){},
        method2: function(){},
        method3: function(){},
        method4: function(){},
        method5: function(){},
        method6: function(){},
        method7: function(){},
        method8: function(){},
        method9: function(){},
        method10: function(){},
        method11: function(){}
    }
};


// Implement of JS Class  with Module Pattern + Anonymous Cached Functions
var FooFunctionY = function () {
    log('foo');
};
var BarFunctionY = function () {
    log('bar');
};
var fn6 = function (val) {
    this.val = this.val + val;
}
var c6method1 = function () {};
var c6method2 = function () {};
var c6method3 = function () {};
var c6method4 = function () {};
var c6method5 = function () {};
var c6method6 = function () {};
var c6method7 = function () {};
var c6method8 = function () {};
var c6method9 = function () {};
var c6method10 = function () {};
var c6method11 = function () {};

var KlassY = (function () {
    var my = {
        val: 0
    };
    my.log = FooFunctionY;
    my.bar = BarFunctionY;
    my.fn = fn6;
    my.c6method1 = c6method1;
    my.c6method2 = c6method2;
    my.c6method3 = c6method3;
    my.c6method4 = c6method4;
    my.c6method5 = c6method5;
    my.c6method6 = c6method6;
    my.c6method7 = c6method7;
    my.c6method8 = c6method8;
    my.c6method9 = c6method9;
    my.c6method10 = c6method10;
    my.c6method11 = c6method11;

    return my;
})();

Klass6 = function () {
    return {
        log: KlassY.log,
        bar: KlassY.bar,
        fn: KlassY.fn,
        c6method1: KlassY.c6method1,
        c6method2: KlassY.c6method2,
        c6method3: KlassY.c6method3,
        c6method4: KlassY.c6method4,
        c6method5: KlassY.c6method5,
        c6method6: KlassY.c6method6,
        c6method7: KlassY.c6method7,
        c6method8: KlassY.c6method8,
        c6method9: KlassY.c6method9,
        c6method10: KlassY.c6method10,
        c6method11: KlassY.c6method11

    }
}
</script>
<script>
Benchmark.prototype.teardown = function() {
    console.log(o)
};
</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
Prototypal
var o = new Klass1()
o.fn(1);
pending…
Module Pattern
var o = Klass2()

o.fn(1);
pending…
Module Pattern With Cached Functions
var o = Klass3()
o.fn(1);
pending…
Module Pattern + Dinamyc Functions
var o = Klass4()
o.fn(1);
pending…
Module Pattern + Anonymous Functions
var o = Klass4()
o.fn(1);
pending…
Module Pattern + Anonymous Cached Functions
var o = Klass6()
o.fn(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