Prototype vs Module pattern performance

JavaScript performance comparison

Revision 63 of this test case created

Info

Removed iterations in tests, because jsperf already does that for us. And renamed variables to be more meaningful to us humans. And other cosmetic changes.

The most important thing to remember is to use the right tool for the job. All these tests do is reference an object with a complex memory allocation. When you don't need something fancy, you're better off using a regular old object

Preparation code

 
<script>
Benchmark.prototype.setup = function() {
    function TraditionalPrototypeClass() {
    }
   
    TraditionalPrototypeClass.prototype.foo = function() {
    console.log('a');
    };
   
    TraditionalPrototypeClass.prototype.bar = function() {
    console.log('a');
    };
   
    function ModulePatternClass() {
        this.foo = function() {
    console.log('a');
        };
       
        this.bar = function() {
    console.log('a');
        };
    }
   
    var ModuleCachePatternClass = (function () {
        function foo() {
    console.log('a');
        }
       
        function bar() {
    console.log('a');
        }
       
        return function () {
            this.foo = foo;
            this.bar = bar;
        };
    }());
   
    var standardObject = {
        foo: function(){
    console.log('a');
        },
        bar: function(){
    console.log('a');
        }
    };
   
    function FakeClass() {
       
        function __constructor() {
            this.init();
        }
   
        __constructor.prototype.init = function() {
        };
   
   
        __constructor.prototype.foo = function(){
    console.log('a');
        };
       
        __constructor.prototype.bar = function(){
    console.log('a');
        };
   
        return new __constructor();
    }
   
    function FakeClassNoInit() {
       
        function __constructor() {
        }
   
        __constructor.prototype.foo = function(){
    console.log('a');
        };
       
        __constructor.prototype.bar = function(){
    console.log('a');
        };
   
        return new __constructor();
    }
};
</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 TraditionalPrototypeClass();
var a = [];
for(var i=2000; i=0; i--)
{
    a.push(new TraditionalPrototypeClass());
}
for(var i=2000; i=0; i--)
{
    a[i].bar;
    a[i].foo;
}
pending…
Module pattern
var o = new ModulePatternClass();
var a = [];
for(var i=2000; i=0; i--)
{
    a.push(new ModulePatternClass());
}
for(var i=2000; i=0; i--)
{
    a[i].bar;
    a[i].foo;
}
pending…
Module pattern with cached functions
var o = new ModuleCachePatternClass();
var a = [];
for(var i=2000; i=0; i--)
{
    a.push(new ModuleCachePatternClass());
}
for(var i=2000; i=0; i--)
{
    a[i].bar;
    a[i].foo;
}
pending…
Standard Object
var o = standardObject;
var a = [];
for(var i=2000; i=0; i--)
{
    a.push(new standardObject());
}
for(var i=2000; i=0; i--)
{
    a[i].bar;
    a[i].foo;
}
pending…
FakeClass
var c = new FakeClass();
var a = [];
for(var i=2000; i=0; i--)
{
    a.push(new FakeClass());
}
for(var i=2000; i=0; i--)
{
    a[i].bar;
    a[i].foo;
}
pending…
FakeClassNoInit
var c = new FakeClassNoInit();
var a = [];
for(var i=2000; i=0; i--)
{
    a.push(new FakeClassNoInit());
}
for(var i=2000; i=0; i--)
{
    a[i].bar;
    a[i].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