JavaScript Object Oriented Libraries Benchmark

JavaScript performance comparison

Revision 64 of this test case created

Info

=== SUPER CALL ===

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="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

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…
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. Here’s a list of current revisions for this page:

0 comments

Add a comment