JavaScript Object Oriented Libraries Benchmark

JavaScript performance comparison

Revision 64 of this test case created by

Preparation code

<script src="http://dl.dropbox.com/u/7677927/oop-benchmark/lib/jsface.js">
</script>
<script src="https://raw.github.com/nodirt/defineClass/master/defineClass.js">
</script>
<script src="https://raw.github.com/kriszyp/compose/master/compose.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="http://dl.dropbox.com/u/7677927/oop-benchmark/all.js">
</script>
<script src="http://indigounited.com/dejavu/dejavu.js">
</script>
<script>
  var JS = {
    VERSION: "2.2.1"
  };
  JS.Class = function(a) {
    function c(a) {
      for (prop in a) {
        if (prop === "statics") {
          for (sprop in a.statics) {
            this.constructor[sprop] = a.statics[sprop]
          }
        } else {
          if (typeof this.constructor.prototype[prop] == "function") {
            var b = this.constructor.prototype[prop];
            var c = this;
            delete this.constructor.prototype[prop];
            (this.constructor.prototype["parent"] = this.constructor.prototype["parent"] || {})[prop] = b;
            this.constructor.prototype[prop] = a[prop]
          } else {
            this.constructor.prototype[prop] = a[prop]
          }
        }
      }
    }

    function b() {
      return function() {
        if (typeof this["construct"] === "function" && d === false) {
          this.construct.apply(this, arguments)
        }
      }
    }
    var d = true;
    this.constructor = b();
    d = false;
    c.call(this, a);
    this.constructor.extend = function(a) {
      d = true;
      this.constructor = b();
      this.constructor.prototype = new(new this).constructor;
      d = false;
      c.call(this, a);
      this.constructor.extend = function(a) {
        var e;
        var f = this;
        d = true;
        this.constructor = b();
        this.constructor.prototype = new this;
        if (e !== undefined) {
          this.constructor.prototype["construct"] = e
        }
        d = false;
        c.call(this, a);
        this.constructor.extend = function(a) {
          return f.extend.apply(this, [a])
        };
        return this.constructor
      };
      return this.constructor
    };
    return this.constructor
  }

  var classextendPerson = JS.Class({
    initialize: function(name) {
      this.name = name;
    },
    setAddress: function(country, city, street) {
      this.country = country;
      this.city = city;
      this.street = street;
    }
  });

  var classextendFrenchGuy = JS.Class({
    parent: classextendPerson,
    setAddress: function(city, street) {
      this.parent.setAddress('France', city, street);
    }
  });

  var classextendParisLover = JS.Class({
    parent: classextendFrenchGuy,
    setAddress: function(street) {
  console.log(this);
      this.parent.setAddress('Paris', street);
    }
  });

  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(function() {
    return {
      initialize: function(name) {
        this.name = name;
      },
      setAddress: function(country, city, street) {
        this.country = country;
        this.city = city;
        this.street = street;
      }
    };
  }, true);

  var dejavuClassFrenchGuy2 = dejavuClassPerson2.extend(function($super) {
    return {
      setAddress: function(city, street) {
        $super.setAddress.call(this, 'France', city, street);
      }
    };
  }, true);

  var dejavuClassParisLover2 = dejavuClassFrenchGuy2.extend(function($super) {
    return {
      setAddress: function(street) {
        $super.setAddress.call(this, 'Paris', street);
      }
    };
  }, true);

  var dcClassPerson = defineClass({
    constructor: function(name) {
      this.name = name;
    },
    setAddress: function(country, city, street) {
      this.country = country;
      this.city = city;
      this.street = street;
    }
  });

  var dcClassFrenchGuy = defineClass({
    _super: dcClassPerson,
    setAddress: function(city, street) {
      this._super('France', city, street);
    }
  });

  var dcClassParisLover = defineClass({
    _super: dcClassFrenchGuy,
    setAddress: function(street) {
      this._super('Paris', street);
    }
  });

  var ComposeClassPerson = Compose(function(name) {
    this.name = name;
  }, {
    setAddress: function(country, city, street) {
      this.country = country;
      this.city = city;
      this.street = street;
    }
  });

  var ComposeClassFrenchGuy = Compose(ComposeClassPerson, {
    setAddress: Compose.around(function(baseSetAddress) {
      return function(city, street) {
        baseSetAddress.call(this, 'France', city, street);
      }
    })
  });

  var ComposeParisLover = Compose(ComposeClassFrenchGuy, {
    setAddress: Compose.around(function(baseSetAddress) {
      return function(street) {
        baseSetAddress.call(this, 'Paris', street);
      }
    })
  });
</script>
    

Preparation code output

<script src="https://raw.github.com/nodirt/defineClass/master/defineClass.js"> </script> <script src="https://raw.github.com/kriszyp/compose/master/compose.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="http://dl.dropbox.com/u/7677927/oop-benchmark/all.js"> </script> <script src="http://indigounited.com/dejavu/dejavu.js"> </script> <script> var JS = { VERSION: "2.2.1" }; JS.Class = function(a) { function c(a) { for (prop in a) { if (prop === "statics") { for (sprop in a.statics) { this.constructor[sprop] = a.statics[sprop] } } else { if (typeof this.constructor.prototype[prop] == "function") { var b = this.constructor.prototype[prop]; var c = this; delete this.constructor.prototype[prop]; (this.constructor.prototype["parent"] = this.constructor.prototype["parent"] || {})[prop] = b; this.constructor.prototype[prop] = a[prop] } else { this.constructor.prototype[prop] = a[prop] } } } } function b() { return function() { if (typeof this["construct"] === "function" && d === false) { this.construct.apply(this, arguments) } } } var d = true; this.constructor = b(); d = false; c.call(this, a); this.constructor.extend = function(a) { d = true; this.constructor = b(); this.constructor.prototype = new(new this).constructor; d = false; c.call(this, a); this.constructor.extend = function(a) { var e; var f = this; d = true; this.constructor = b(); this.constructor.prototype = new this; if (e !== undefined) { this.constructor.prototype["construct"] = e } d = false; c.call(this, a); this.constructor.extend = function(a) { return f.extend.apply(this, [a]) }; return this.constructor }; return this.constructor }; return this.constructor } var classextendPerson = JS.Class({ initialize: function(name) { this.name = name; }, setAddress: function(country, city, street) { this.country = country; this.city = city; this.street = street; } }); var classextendFrenchGuy = JS.Class({ parent: classextendPerson, setAddress: function(city, street) { this.parent.setAddress('France', city, street); } }); var classextendParisLover = JS.Class({ parent: classextendFrenchGuy, setAddress: function(street) { console.log(this); this.parent.setAddress('Paris', street); } }); 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(function() { return { initialize: function(name) { this.name = name; }, setAddress: function(country, city, street) { this.country = country; this.city = city; this.street = street; } }; }, true); var dejavuClassFrenchGuy2 = dejavuClassPerson2.extend(function($super) { return { setAddress: function(city, street) { $super.setAddress.call(this, 'France', city, street); } }; }, true); var dejavuClassParisLover2 = dejavuClassFrenchGuy2.extend(function($super) { return { setAddress: function(street) { $super.setAddress.call(this, 'Paris', street); } }; }, true); var dcClassPerson = defineClass({ constructor: function(name) { this.name = name; }, setAddress: function(country, city, street) { this.country = country; this.city = city; this.street = street; } }); var dcClassFrenchGuy = defineClass({ _super: dcClassPerson, setAddress: function(city, street) { this._super('France', city, street); } }); var dcClassParisLover = defineClass({ _super: dcClassFrenchGuy, setAddress: function(street) { this._super('Paris', street); } }); var ComposeClassPerson = Compose(function(name) { this.name = name; }, { setAddress: function(country, city, street) { this.country = country; this.city = city; this.street = street; } }); var ComposeClassFrenchGuy = Compose(ComposeClassPerson, { setAddress: Compose.around(function(baseSetAddress) { return function(city, street) { baseSetAddress.call(this, 'France', city, street); } }) }); var ComposeParisLover = Compose(ComposeClassFrenchGuy, { setAddress: Compose.around(function(baseSetAddress) { return function(street) { baseSetAddress.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…
my.Class
var p6 = new MyParisLover("Mary");
p6.setAddress("CH");
pending…
John Resig Class
var p9 = new JRParisLover("Mary");
p9.setAddress("CH");
pending…
Klass
var p12 = new EnderParisLover("Mary");
p12.setAddress("CH");
pending…
Classy
var p15 = new ClassyParisLover("Mary");
p15.setAddress("CH");
pending…
PTClass
var p18 = new PTClassParisLover("Mary");
p18.setAddress("CH");
pending…
dejavu
var p19 = new dejavuClassParisLover("Mary");
p19.setAddress("CH");
pending…
dejavu (after optimization)
var p20 = new dejavuClassParisLover2("Mary");
p20.setAddress("CH");
pending…
defineClass
var p21 = new dcClassParisLover("Mary");
p21.setAddress("CH");
pending…
Compose
var p22 = new ComposeParisLover("Mary");
p22.setAddress("CH");
pending…
classextend
var p23 = new classextendParisLover("Mary");
p23.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