JavaScript Module Pattern Test Cases

JavaScript performance comparison

Test case created by Eduardo F. Sandino

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>
  Benchmark.prototype.setup = function() {
       
        // Implementation of a JS Class with Prototype Pattern
    Klass1 = function() {}
    Klass1.prototype.foo = function() {
      log('foo');
    }
    Klass1.prototype.bar = function() {
      log('bar');
    }
   
        // Implementation of a JS Class with Module Pattern
    Klass2 = function() {
      var foo = function() {
            log('foo');
          },
          bar = function() {
            log('bar');
          };
   
      return {foo: foo, bar: bar}
    }
       
         
    // Implementation of a JS Class with Module Pattern + Cached Functions
    var FooFunction = function() {
      log('foo');
    };
    var BarFunction = function() {
      log('bar');
    };
   
    Klass3 = function() {
      return {foo: FooFunction, bar: BarFunction}
    }
       
        // Implements of JS Class with Module Pattern + Dinamyc Functions
        Klass4 = function() {
                return {
                        foo:function(){log('foo');},
                        bar:function(){log('bar');}
                        }
        };
       
        // Implement of JS Class with Module Pattern + Anonymous Functions
        var KlassX = (function(){
                var my ={};
                my.log = function(){log('foo')};
                my.bar = function(){log('bar')};
                return my;
        })();
       
        Klass5 = function(){
                return {
                        log:KlassX.log,
                        bar:KlassX.bar
                }
        }
       
        // Implement of JS Class  with Module Pattern + Anonymous Cached Functions
        var FooFunctionY = function(){
                log('foo');
        };
        var BarFunctionY = function(){
                log('bar');
        };
        var KlassY = ( function(){
                var my = {};
                my.log = FooFunctionY;
                my.bar = BarFunctionY;
                return my;
        })();
       
        Klass6 = function(){
                return {
                        log:KlassY.log,
                        bar:KlassY.bar
                }
        }
   
       
}       //end braked of JSPerform API do not erase
</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 i = 1000,
    objs = [];
while (i--) {
  var o = new Klass1()
  objs.push(new Klass1());
  o.bar;
  o.foo;
}
pending…
Module Pattern
var i = 1000,
    objs = [];
while (i--) {
  var o = Klass2()
  objs.push(Klass2());
  o.bar;
  o.foo;
}
pending…
Module Pattern With Cached Functions
var i = 1000,
    objs = [];
while (i--) {
  var o = Klass3()
  objs.push(Klass3());
  o.bar;
  o.foo;
}
pending…
Module Pattern + Dinamyc Functions
var i = 1000,
    objs = [];
while (i--) {
  var o = Klass4()
  objs.push(Klass4());
  o.bar;
  o.foo;
}
pending…
Module Pattern + Anonymous Functions
var i = 1000,
    objs = [];
while (i--) {
  var o = Klass5()
  objs.push(Klass5());
  o.bar;
  o.foo;
}
pending…
Module Pattern + Anonymous Cached Functions
var i = 1000,
    objs = [];
while (i--) {
  var o = Klass6()
  objs.push(Klass6());
  o.bar;
  o.foo;
}
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