JavaScript Object Oriented Libraries Benchmark

JavaScript performance comparison

Revision 14 of this test case created

Info

=== FULL TEST ==

MooTools and Ext Core are removed because they add extra information into native classes. They slow down other libraries.

Ext Core OOP is fast, MooTools OOP is super slow!

TODO: - Add YUI

Preparation code

<script src="http://dl.dropbox.com/u/7677927/oop-benchmark/lib/jsface.js"></script>
<script src="http://dl.dropbox.com/u/7677927/oop-benchmark/lib/jsface.js"></script>

<script src="http://dl.dropbox.com/u/7677927/oop-benchmark/lib/my.class.js"</script>
<script src="http://dl.dropbox.com/u/7677927/oop-benchmark/lib/my.class.js"</script>

<script src="http://dl.dropbox.com/u/7677927/oop-benchmark/lib/jrclass.js"</script>
<script src="http://dl.dropbox.com/u/7677927/oop-benchmark/lib/jrclass.js"</script>

<script src="http://dl.dropbox.com/u/7677927/oop-benchmark/lib/klass.js"></script>
<script src="http://dl.dropbox.com/u/7677927/oop-benchmark/lib/klass.js"></script>

<script src="http://dl.dropbox.com/u/7677927/oop-benchmark/lib/classy.js"></script>
<script src="http://dl.dropbox.com/u/7677927/oop-benchmark/lib/classy.js"></script>

<script src="http://dl.dropbox.com/u/7677927/oop-benchmark/lib/ptclass.js"</script>
<script src="http://dl.dropbox.com/u/7677927/oop-benchmark/lib/ptclass.js"</script>
<script>
  Benchmark.prototype.setup = function() {
    var JSFacePerson = jsface.Class({
      constructor: function(name){
        this.name = name;
      },
      setAddress: function(country, city, street) {
        this.country = country;
        this.city = city;
        this.street = street;
      }
    });
    
    var JSFaceFrenchGuy = jsface.Class(JSFacePerson, {
      constructor: function(name) {
        JSFaceFrenchGuy.$super.call(this, name);
      },
      setAddress: function(city, street) {
        JSFaceFrenchGuy.$superp.setAddress.call(this, 'France', city, street);
      }
    });
    
    var JSFaceParisLover = jsface.Class(JSFaceFrenchGuy, {
      constructor: function(name) {
        JSFaceParisLover.$super.call(this, name);
      },
      setAddress: function(street) {
        JSFaceParisLover.$superp.setAddress.call(this, 'Paris', street);
      }
    });
    
    var p1 = new JSFacePerson("John");
    var p2 = new JSFaceFrenchGuy("Leo");
    var p3 = new JSFaceParisLover("Mary");
    
    ///////////////
    
    var MyPerson = my.Class({
      constructor: function(name){
        this.name = name;
      },
      setAddress: function(country, city, street) {
        this.country = country;
        this.city = city;
        this.street = street;
      }
    });
    
    var MyFrenchGuy = my.Class(MyPerson, {
      constructor: function(name) {
        MyFrenchGuy.Super.call(this, name);
      },
      setAddress: function(city, street) {
        MyFrenchGuy.Super.prototype.setAddress.call(this, 'France', city, street);
      }
    });
    
    var MyParisLover = my.Class(MyFrenchGuy, {
      constructor: function(name) {
        MyParisLover.Super.call(this, name);
      },
      setAddress: function(street) {
        MyParisLover.Super.prototype.setAddress.call(this, 'Paris', street);
      }
    });
    
    var p4 = new MyPerson("John");
    var p5 = new MyFrenchGuy("Leo");
    var p6 = new MyParisLover("Mary");
    
    //////////
    var JRPerson = JRClass.extend({
      init: function(name){
        this.name = name;
      },
      setAddress: function(country, city, street) {
        this.country = country;
        this.city = city;
        this.street = street;
      },
      sayHello: function() {
        console.log('I am ' + this.name + '. My address is ' +
            this.country + ', ' + this.city + ', ' + this.street + '.');
      }
    });
    
    var JRFrenchGuy = JRPerson.extend({
      init: function(name) {
        this._super(name);
      },
      setAddress: function(city, street) {
        this._super('France', city, street);
      }
    });
    
    var JRParisLover = JRFrenchGuy.extend({
      init: function(name) {
        this._super(name);
      },
      setAddress: function(street) {
        this._super('Paris', street);
      }
    });
    
    var p7 = new JRPerson("John");
    var p8 = new JRFrenchGuy("Leo");
    var p9 = new JRParisLover("Mary");
    
    //////////
    var EnderPerson = klass(function(name) {
      this.name = name;
    })
    .methods({
      setAddress: function(country, city, street) {
        this.country = country;
        this.city = city;
        this.street = street;
      }
    });
    
    var EnderFrenchGuy = EnderPerson.extend(function(name) {
    })
    .methods({
      setAddress: function(city, street) {
        this.supr('France', city, street);
      }
    });
    
    var EnderParisLover = EnderFrenchGuy.extend(function(name) {
    })
    .methods({
      setAddress: function(street) {
        this.supr('Paris', street);
      }
    });
    
    var p10 = new EnderPerson("John");
    var p11 = new EnderFrenchGuy("Leo");
    var p12 = new EnderParisLover("Mary");
    
    ///////////
    var ClassyPerson = Classy.$extend({
      __init__: function(name){
        this.name = name;
      },
      setAddress: function(country, city, street) {
        this.country = country;
        this.city = city;
        this.street = street;
      }
    });
    
    var ClassyFrenchGuy = ClassyPerson.$extend({
      __init__: function(name) {
        this.$super(name);
      },
      setAddress: function(city, street) {
        this.$super('France', city, street);
      }
    });
    
    var ClassyParisLover = ClassyFrenchGuy.$extend({
      __init__: function(name) {
        this.$super(name);
      },
      setAddress: function(street) {
        this.$super('Paris', street);
      }
    });
    
    var p13 = new ClassyPerson("John");
    var p14 = new ClassyFrenchGuy("Leo");
    var p15 = new ClassyParisLover("Mary");
    
    ///////////////
    var PTClassPerson = PTClass.create({
      initialize: function(name){
        this.name = name;
      },
      setAddress: function(country, city, street) {
        this.country = country;
        this.city = city;
        this.street = street;
      }
    });
    
    var PTClassFrenchGuy = PTClass.create(PTClassPerson, {
      initialize: function($super, name) {
        $super(name);
      },
      setAddress: function($super, city, street) {
        $super('France', city, street);
      }
    });
    
    var PTClassParisLover = PTClass.create(PTClassFrenchGuy, {
      initialize: function($super, name) {
        $super(name);
      },
      setAddress: function($super, street) {
        $super('Paris', street);
      }
    });
    
    var p16 = new PTClassPerson("John");
    var p17 = new PTClassFrenchGuy("Leo");
    var p18 = new PTClassParisLover("Mary");
  };
</script>

Preparation code output

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
JSFace
 
p3.setAddress("CH");
 pending…
my.Class
 
p6.setAddress("CH");
 pending…
John Resig Class
 
p9.setAddress("CH");
 pending…
Klass
 
p12.setAddress("CH");
 pending…
Classy
 
p15.setAddress("CH");
 pending…
PTClass
 
p18.setAddress("CH");
 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