JavaScript Object Oriented Libraries Benchmark

JavaScript performance comparison

Revision 86 of this test case created by Yuan Tao

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/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/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/ptclass.js"></script>

<script src="https://raw.github.com/javascript/augment/master/augment.js"></script>

<script src="http://cdn.sencha.com/ext-4.1.1a-gpl/builds/ext-foundation.js"></script>

<script src="https://raw.github.com/torworx/oxygen/master/oxygen.js"></script>

<script>
  var __hasProp = {}.hasOwnProperty,
      __extends = function(child, parent) {
      for (var key in parent) {
        if (__hasProp.call(parent, key)) child[key] = parent[key];
      }
      function ctor() {
        this.constructor = child;
      }
      ctor.prototype = parent.prototype;
      child.prototype = new ctor();
      child.__super__ = parent.prototype;
      return child;
      };
</script>

Preparation code output

Test runner

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

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
JSFace 
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");
p1.setAddress("US", "MT", "CH");

var p2 = new JSFaceFrenchGuy("Leo");
p2.setAddress("MT", "CH");

var p3 = new JSFaceParisLover("Mary");
p3.setAddress("CH");
 pending…
my.Class 
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");
p4.setAddress("US", "MT", "CH");

var p5 = new MyFrenchGuy("Leo");
p5.setAddress("MT", "CH");

var p6 = new MyParisLover("Mary");
p6.setAddress("CH");
 pending…
John Resig Class 
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");
p7.setAddress("US", "MT", "CH");

var p8 = new JRFrenchGuy("Leo");
p8.setAddress("MT", "CH");

var p9 = new JRParisLover("Mary");
p9.setAddress("CH");
 pending…
Klass 
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");
p10.setAddress("US", "MT", "CH");

var p11 = new EnderFrenchGuy("Leo");
p11.setAddress("MT", "CH");

var p12 = new EnderParisLover("Mary");
p12.setAddress("CH");
 pending…
Classy 
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");
p13.setAddress("US", "MT", "CH");

var p14 = new ClassyFrenchGuy("Leo");
p14.setAddress("MT", "CH");

var p15 = new ClassyParisLover("Mary");
p15.setAddress("CH");
 pending…
PTClass 
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");
p16.setAddress("US", "MT", "CH");

var p17 = new PTClassFrenchGuy("Leo");
p17.setAddress("MT", "CH");

var p18 = new PTClassParisLover("Mary");
p18.setAddress("CH");
 pending…
CoffeeScript Classes 
var CoffeePerson = (function() {

  function CoffeePerson(name) {
    this.name = name;
  }

  CoffeePerson.prototype.setAddress = function(country, city, street) {
    this.country = country;
    this.city = city;
    this.street = street;
  };

  return CoffeePerson;

})();

var CoffeeFrenchGuy = (function(_super) {

  __extends(CoffeeFrenchGuy, _super);

  function CoffeeFrenchGuy(name) {
    CoffeeFrenchGuy.__super__.constructor.call(this, name);
  }

  CoffeeFrenchGuy.prototype.setAddress = function(city, street) {
    return CoffeeFrenchGuy.__super__.setAddress.call(this, "France", city, street);
  };

  return CoffeeFrenchGuy;

})(CoffeePerson);

var CoffeeParisLover = (function(_super) {

  __extends(CoffeeParisLover, _super);

  function CoffeeParisLover(name) {
    CoffeeParisLover.__super__.constructor.call(this, name);
  }

  CoffeeParisLover.prototype.setAddress = function(street) {
    return CoffeeParisLover.__super__.setAddress.call(this, "Paris", street);
  };

  return CoffeeParisLover;

})(CoffeeFrenchGuy);

var p1 = new CoffeePerson("John");
p1.setAddress("US", "MT", "CH");

var p2 = new CoffeeFrenchGuy("Leo");
p2.setAddress("MT", "CH");

var p3 = new CoffeeParisLover("Mary");
p3.setAddress("CH");
 pending…
augment 
var AugmentPerson = Object.augment(function() {
  this.setAddress = function(country, city, street) {
    this.country = country;
    this.city = city;
    this.street = street;
  };

  return AugmentPerson;

  function AugmentPerson(name) {
    this.name = name;
  }
});

var AugmentFrenchGuy = AugmentPerson.augment(function(AugmentPerson, uber) {
  this.setAddress = function(city, street) {
    uber.setAddress.call(this, "France", city, street);
  };

  return AugmentFrenchGuy;

  function AugmentFrenchGuy(name) {
    AugmentPerson.call(this, name);
  }
});

var AugmentParisLover = AugmentFrenchGuy.augment(function(AugmentFrenchGuy, uber) {
  this.setAddress = function(street) {
    uber.setAddress.call(this, "Paris", street);
  };

  return AugmentParisLover;

  function AugmentParisLover(name) {
    AugmentFrenchGuy.call(this, name);
  }
});

var p1 = new AugmentPerson("John");
p1.setAddress("US", "MT", "CH");

var p2 = new AugmentFrenchGuy("Leo");
p2.setAddress("MT", "CH");

var p3 = new AugmentParisLover("Mary");
p3.setAddress("CH");
 pending…
Ext JS 
Ext.define('ExtPerson', {
  constructor: function(name) {
    this.name = name;
  },
  setAddress: function(country, city, street) {
    this.country = country;
    this.city = city;
    this.street = street;
  }
});

Ext.define('ExtChinaGuy', {
  extend: 'ExtPerson',
  constructor: function() {
    this.callParent(arguments);
  },
  setAddress: function(city, street) {
    this.callParent(['China', city, street]);
  }
});

Ext.define('ExtBeiJingLover', {
  extend: 'ExtChinaGuy',
  constructor: function(name) {
    this.callParent(arguments);
  },
  setAddress: function(street) {
    this.callParent(['BeiJing', street]);
  }
});

var p1 = new ExtPerson("John");
p1.setAddress("US", "MT", "CH");

var p2 = new ExtChinaGuy("Leo");
p2.setAddress("MT", "CH");

var p3 = new ExtBeiJingLover("Mary");
p3.setAddress("CH");
 pending…
Oxygen JS 
var OxyPerson = Oxy.define({
  constructor: function(name) {
    this.name = name;
  },
  setAddress: function(country, city, street) {
    this.country = country;
    this.city = city;
    this.street = street;
  }
});

var OxyChinaGuy = Oxy.define({
  extend: OxyPerson,
  constructor: function() {
    this.callParent(arguments);
  },
  setAddress: function(city, street) {
    this.callParent(['China', city, street]);
  }
});

var OxyBeiJingLover = Oxy.define({
  extend: OxyChinaGuy,
  constructor: function(name) {
    this.callParent(arguments);
  },
  setAddress: function(street) {
    this.callParent(['BeiJing', street]);
  }
});

var p1 = new OxyPerson("John");
p1.setAddress("US", "MT", "CH");

var p2 = new OxyChinaGuy("Leo");
p2.setAddress("MT", "CH");

var p3 = new OxyBeiJingLover("Mary");
p3.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.

5 Comments

Aadit M Shah commented : ∞

@YuanTao - ExtJS gives an error. Please post another revision.

Yuan Tao (revision owner) commented : ∞

OK, now it works.

Aadit M Shah commented : ∞

The info says:

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

Clearly not the case here. ExtJS is the slowest and augment beats every other library by a huge amount!

Also:

TODO: - Add YUI

Yuan Tao (revision owner) commented : ∞

This revision just add Ext Js 4.1 test.

Ext Core OOP is fast, MooTools OOP is super slow! Maybe refers Ext Core 3

TODO: - Add YUI Never used YUI :(，Sorry

Yuan Tao (revision owner) commented : ∞

Sorry about format.

This revision just add Ext Js 4.1 test.

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

Maybe refers Ext Core 3

TODO: - Add YUI

Never used YUI :(，Sorry