JavaScript Object Oriented Libraries Benchmark

JavaScript performance comparison

Revision 129 of this test case created by Yuan Tao

Preparation code

<script src="https://raw.github.com/tnhu/jsface/master/jsface.js">
</script>
<script src="https://raw.github.com/javascript/augment/master/lib/augment.js">
</script>
</script>
<script src="https://raw.github.com/torworx/ovy/master/ovy.js">
</script>
<script src="http://indigounited.com/dejavu/dejavu.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;
      };

  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

<script src="https://raw.github.com/javascript/augment/master/lib/augment.js"> </script> </script> <script src="https://raw.github.com/torworx/ovy/master/ovy.js"> </script> <script src="http://indigounited.com/dejavu/dejavu.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; }; 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>

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 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.

0 Comments