JavaScript Object Oriented Libraries Benchmark

JavaScript performance comparison

Revision 94 of this test case created by Aadit M Shah

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="https://raw.github.com/tnhu/jsface/master/jsface.js">
</script>
<script src="https://raw.github.com/jiem/my-class/master/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.js/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 unknown unknown
Test Ops/sec
JSFace
 
var Person = jsface.Class({
  constructor: function(name) {
    this.name = name;
  },
  setAddress: function(country, city, street) {
    this.country = country;
    this.city = city;
    this.street = street;
  }
});

var FrenchGuy = jsface.Class(Person, {
  constructor: function(name) {
    FrenchGuy.$super.call(this, name);
  },
  setAddress: function(city, street) {
    FrenchGuy.$superp.setAddress.call(this, 'France', city, street);
  }
});

var ParisLover = jsface.Class(FrenchGuy, {
  constructor: function(name) {
    ParisLover.$super.call(this, name);
  },
  setAddress: function(street) {
    ParisLover.$superp.setAddress.call(this, 'Paris', street);
  }
});

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

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

var p3 = new ParisLover("Mary");
p3.setAddress("CH");
 pending…
my.Class
 
var Person = my.Class({
  constructor: function(name) {
    this.name = name;
  },
  setAddress: function(country, city, street) {
    this.country = country;
    this.city = city;
    this.street = street;
  }
});

var FrenchGuy = my.Class(Person, {
  constructor: function(name) {
    FrenchGuy.Super.call(this, name);
  },
  setAddress: function(city, street) {
    FrenchGuy.Super.prototype.setAddress.call(this, 'France', city, street);
  }
});

var ParisLover = my.Class(FrenchGuy, {
  constructor: function(name) {
    ParisLover.Super.call(this, name);
  },
  setAddress: function(street) {
    ParisLover.Super.prototype.setAddress.call(this, 'Paris', street);
  }
});

var p4 = new Person("John");
p4.setAddress("US", "MT", "CH");

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

var p6 = new ParisLover("Mary");
p6.setAddress("CH");
 pending…
John Resig Class
 
var Person = JRClass.extend({
  init: function(name) {
    this.name = name;
  },
  setAddress: function(country, city, street) {
    this.country = country;
    this.city = city;
    this.street = street;
  }
});

var FrenchGuy = Person.extend({
  init: function(name) {
    this._super(name);
  },
  setAddress: function(city, street) {
    this._super('France', city, street);
  }
});

var ParisLover = FrenchGuy.extend({
  init: function(name) {
    this._super(name);
  },
  setAddress: function(street) {
    this._super('Paris', street);
  }
});

var p7 = new Person("John");
p7.setAddress("US", "MT", "CH");

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

var p9 = new ParisLover("Mary");
p9.setAddress("CH");
 pending…
Klass
 
var Person = klass(function(name) {
  this.name = name;
}).methods({
  setAddress: function(country, city, street) {
    this.country = country;
    this.city = city;
    this.street = street;
  }
});

var FrenchGuy = Person.extend(function(name) {}).methods({
  setAddress: function(city, street) {
    this.supr('France', city, street);
  }
});

var ParisLover = FrenchGuy.extend(function(name) {}).methods({
  setAddress: function(street) {
    this.supr('Paris', street);
  }
});

var p10 = new Person("John");
p10.setAddress("US", "MT", "CH");

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

var p12 = new ParisLover("Mary");
p12.setAddress("CH");
 pending…
Classy
 
var Person = Classy.$extend({
  __init__: function(name) {
    this.name = name;
  },
  setAddress: function(country, city, street) {
    this.country = country;
    this.city = city;
    this.street = street;
  }
});

var FrenchGuy = Person.$extend({
  __init__: function(name) {
    this.$super(name);
  },
  setAddress: function(city, street) {
    this.$super('France', city, street);
  }
});

var ParisLover = FrenchGuy.$extend({
  __init__: function(name) {
    this.$super(name);
  },
  setAddress: function(street) {
    this.$super('Paris', street);
  }
});

var p13 = new Person("John");
p13.setAddress("US", "MT", "CH");

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

var p15 = new ParisLover("Mary");
p15.setAddress("CH");
 pending…
PTClass
 
var Person = PTClass.create({
  initialize: function(name) {
    this.name = name;
  },
  setAddress: function(country, city, street) {
    this.country = country;
    this.city = city;
    this.street = street;
  }
});

var FrenchGuy = PTClass.create(Person, {
  initialize: function($super, name) {
    $super(name);
  },
  setAddress: function($super, city, street) {
    $super('France', city, street);
  }
});

var ParisLover = PTClass.create(FrenchGuy, {
  initialize: function($super, name) {
    $super(name);
  },
  setAddress: function($super, street) {
    $super('Paris', street);
  }
});

var p16 = new Person("John");
p16.setAddress("US", "MT", "CH");

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

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

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

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

  return Person;

})();

var FrenchGuy = (function(_super) {

  __extends(FrenchGuy, _super);

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

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

  return FrenchGuy;

})(Person);

var ParisLover = (function(_super) {

  __extends(ParisLover, _super);

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

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

  return ParisLover;

})(FrenchGuy);

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

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

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

  return Person;

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

var IndianGuy = Person.augment(function(Person, uber) {
  var setAddress = uber.setAddress;

  this.setAddress = function(city, street) {
    setAddress.call(this, "India", city, street);
  };

  return IndianGuy;

  function IndianGuy(name) {
    Person.call(this, name);
  }
});

var MumbaiLover = IndianGuy.augment(function(IndianGuy, uber) {
  var setAddress = uber.setAddress;

  this.setAddress = function(street) {
    setAddress.call(this, "Mumbai", street);
  };

  return MumbaiLover;

  function MumbaiLover(name) {
    IndianGuy.call(this, name);
  }
});

var p1 = new Person("Barack Obama");
p1.setAddress("USA", "Washington, D.C.", "Pennsylvania Avenue");

var p2 = new IndianGuy("Mahatma Gandhi");
p2.setAddress("Ahmedabad", "Ashram Road");

var p3 = new MumbaiLover("Aadit M Shah");
p3.setAddress("L.D. Ruparel Marg");
 pending…
Ext JS
 
Ext.define('Person', {
  constructor: function(name) {
    this.name = name;
  },
  setAddress: function(country, city, street) {
    this.country = country;
    this.city = city;
    this.street = street;
  }
});

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

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

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

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

var p3 = new BeiJingLover("Mary");
p3.setAddress("CH");
 pending…
OxygenJS
 
var Person = Oxy.define({
  constructor: function(name) {
    this.name = name;
  },
  setAddress: function(country, city, street) {
    this.country = country;
    this.city = city;
    this.street = street;
  }
});

var ChinaGuy = Oxy.define({
  extend: Person,
  constructor: function() {
    Person.call(this)
  },
  setAddress: function(city, street) {
    ChinaGuy.$super.setAddress('China', city, street);
  }
});

var BeiJingLover = Oxy.define({
  extend: ChinaGuy,
  constructor: function(name) {
    ChinaGuy.call(this, name);
  },
  setAddress: function(street) {
    BeiJingLover.$super.setAddress('BeiJing', street);
  }
});

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

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

var p3 = new BeiJingLover("Mary");
p3.setAddress("CH");
 pending…
OxygenJS(augment style)
 
var Person = Oxy.extend(Object, function() {

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

  return Person;

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

var ChinaGuy = Oxy.extend(Person, function(Person, parent) {

  this.setAddress = function(city, street) {
    parent.setAddress('China', city, street);
  }

  return ChinaGuy;

  function ChinaGuy() {
    Person.call(this)
  }
});

var BeiJingLover = Oxy.extend(ChinaGuy, function(ChinaGuy, parent) {
  this.setAddress = function(street) {
    parent.setAddress('BeiJing', street);
  }
  return BeijingLover;

  function BeijingLover(name) {
    ChinaGuy.call(this, name);
  }
});

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

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

var p3 = new BeiJingLover("Mary");
p3.setAddress("CH");
 pending…
Vapor.js
 
var personProto = Person.prototype;

var personSetAddress = personProto.setAddress = function(country, city, street) {
    this.country = country;
    this.city = city;
    this.street = street;
    };

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

var frenchProto = FrenchGuy.prototype = Object.create(personProto);

var frenchSetAddress = frenchProto.setAddress = function(city, street) {
    personSetAddress.call(this, "France", city, street);
    };

frenchProto.constructor = FrenchGuy;

function FrenchGuy(name) {
  Person.call(this, name);
}

var parisProto = ParisLover.prototype = Object.create(frenchProto);

parisProto.setAddress = function(street) {
  frenchSetAddress.call(this, "Paris", street);
};

parisProto.constructor = ParisLover;

function ParisLover(name) {
  FrenchGuy.call(this, name);
}

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

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

var p3 = new ParisLover("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. Here’s a list of current revisions for this page:

0 comments

Add a comment