JavaScript Object Oriented Libraries Benchmark

JavaScript performance comparison

Revision 132 of this test case created

Info

Always use rawgithub.com instead of raw.github.com

=== 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="//rawgithub.com/tnhu/jsface/master/jsface.js" type="text/javascript"></script>
<script src="//rawgithub.com/javascript/augment/master/lib/augment.js" type="text/javascript"></script>
<script src="//rawgithub.com/torworx/ovy/master/ovy.js" type="text/javascript"></script>
<script src="//indigounited.com/dejavu/dejavu.js" type="text/javascript"></script>
 
<script>
Benchmark.prototype.setup = function() {
      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;
          };
   
      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 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 dejavuClassPerson = dejavu.Class.declare({
        initialize: function(name) {
          this.name = name;
        },
        setAddress: function(country, city, street) {
          this.country = country;
          this.city = city;
          this.street = street;
        }
      });
   
      var dejavuClassFrenchGuy = dejavu.Class.declare({
        $extends: dejavuClassPerson,
        setAddress: function(city, street) {
          this.$super('France', city, street);
        }
      });
   
      var dejavuClassParisLover = dejavu.Class.declare({
        $extends: dejavuClassFrenchGuy,
        setAddress: function(street) {
          this.$super('Paris', street);
        }
      });
   
      var dejavuClassPerson2 = dejavu.Class.declare({
        initialize: function(name) {
          this.name = name;
        },
        setAddress: function(country, city, street) {
          this.country = country;
          this.city = city;
          this.street = street;
        }
      }, true);
   
      var dejavuClassFrenchGuy2 = dejavu.Class.declare({
        $extends: dejavuClassPerson2,
        initialize: function(name) {
          dejavuClassPerson2.call(this, name);
        },
        setAddress: function(city, street) {
          dejavuClassPerson2.prototype.setAddress.call(this, 'France', city, street);
        }
      }, true);
   
      var dejavuClassParisLover2 = dejavu.Class.declare({
        $extends: dejavuClassFrenchGuy2,
        initialize: function(name) {
          dejavuClassFrenchGuy2.call(this, name);
        },
        setAddress: function(street) {
          dejavuClassFrenchGuy2.prototype.setAddress.call(this, 'Paris', street);
        }
      }, true);
   
      var dejavuClassPerson3 = dejavu.Class.declare(function() {
        return {
          initialize: function(name) {
            this.name = name;
          },
          setAddress: function(country, city, street) {
            this.country = country;
            this.city = city;
            this.street = street;
          }
        };
      }, true);
   
      var dejavuClassFrenchGuy3 = dejavuClassPerson3.extend(function($super) {
        return {
          setAddress: function(city, street) {
            $super.setAddress.call(this, 'France', city, street);
          }
        };
      }, true);
   
      var dejavuClassParisLover3 = dejavuClassFrenchGuy3.extend(function($super) {
        return {
          setAddress: function(street) {
            $super.setAddress.call(this, 'Paris', street);
          }
        };
      }, true);
   
      var OvyPerson = Ovy.define({
        constructor: function(name) {
          this.name = name;
        },
        setAddress: function(country, city, street) {
          this.country = country;
          this.city = city;
          this.street = street;
        }
      });
   
      var OvyChinaGuy = Ovy.define({
        extend: OvyPerson,
        setAddress: function(city, street) {
          OvyChinaGuy.$super.setAddress.call(this, 'China', city, street);
        }
      });
   
      var OvyBeijingLover = Ovy.define({
        extend: OvyChinaGuy,
        setAddress: function(street) {
          OvyBeijingLover.$super.setAddress.call(this, 'Beijing', street);
        }
      });
   
   
      var OvyPerson2 = ovy.extend(function() {
   
        return {
          constructor: function(name) {
            this.name = name;
          },
          setAddress: function(country, city, street) {
            this.country = country;
            this.city = city;
            this.street = street;
          }
        }
      });
   
      var OvyChinaGuy2 = ovy.extend(OvyPerson2, function($super) {
        return {
          setAddress: function(city, street) {
            $super.setAddress('China', city, street);
          }
        }
      });
   
      var OvyBeijingLover2 = ovy.extend(OvyChinaGuy2, function($super) {
        return {
          setAddress: function(street) {
            $super.setAddress('Beijing', street);
          }
        }
      });
   
   
      var AugmentPerson = Object.augment(function() {
        this.constructor = function(name) {
          this.name = name;
        };
   
        this.setAddress = function(country, city, street) {
          this.country = country;
          this.city = city;
          this.street = street;
        };
      });
   
      var AugmentFrenchGuy = AugmentPerson.augment(function(base) {
        var setAddress = base.setAddress;
   
        this.constructor = function(name) {
          AugmentPerson.call(this, name);
        };
   
        this.setAddress = function(city, street) {
          setAddress.call(this, "France", city, street);
        };
      });
   
      var AugmentParisLover = AugmentFrenchGuy.augment(function(base) {
        var setAddress = base.setAddress;
   
        this.constructor = function(name) {
          AugmentFrenchGuy.call(this, name);
        };
   
        this.setAddress = function(street) {
          setAddress.call(this, "Paris", street);
        };
      });
};
</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 p3 = new JSFaceParisLover("Mary");
p3.setAddress("CH");
pending…
CoffeeScript Classes
var p21 = new CoffeeParisLover("Mary");
p21.setAddress("CH");
pending…
augment
var p24 = new AugmentParisLover("Mary");
p24.setAddress("CH");
pending…
ovy
var p30 = new OvyBeijingLover("Mary");
p30.setAddress("CH");
pending…
ovy closure
var p31 = new OvyBeijingLover2("Mary");
p31.setAddress("CH");
pending…
dejavu
var p33 = new dejavuClassParisLover("Mary");
p33.setAddress("CH");
pending…
dejavu optimized
var p36 = new dejavuClassParisLover2("Mary");
p36.setAddress("CH");
pending…
dejavu optimized closures
var p39 = new dejavuClassParisLover3("Mary");
p39.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