oop-benchmark

JavaScript performance comparison

Revision 148 of this test case created

Info

MooTools is removed because it adds information into every single object hence slows down other frameworks. Overral, its OOP is very slow.

Todo: Add ExtCore + YUI.

Preparation code

<script src="http://dl.dropbox.com/u/7677927/oop-benchmark/lib/jsface.js"></script>
<script src="http://dl.dropbox.com/u/7677927/oop-benchmark/lib/jsface.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/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/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/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/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/lib/ptclass.js"</script>

<script src="http://dl.dropbox.com/u/7677927/oop-benchmark/lib/ext-core.js"></script>
<script src="http://dl.dropbox.com/u/7677927/oop-benchmark/lib/ext-core.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/stapes/0.8.0/stapes.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/stapes/0.8.0/stapes.min.js"></script>

<script src="//yandex.st/rightjs/2.1.1/right-min.js"></script>
<script src="//yandex.st/rightjs/2.1.1/right-min.js"></script>

<script src="https://github.com/jasonwyatt/ancestry.js/raw/master/ancestry.js"></script>
<script src="https://github.com/jasonwyatt/ancestry.js/raw/master/ancestry.js"></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 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 p1 = new JSFacePerson("John");
p1.setAddress("US", "MT", "CH");

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

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

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

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

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

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

var p6 = new MyParisLover("Mary");
p6.setAddress("CH");
pending…
John Resig Class
var JRPerson = JRClass.extend({
  init: function(name){
    this.name = name;
  },
  setAddress: function(country, city, street) {
    this.country = country;
    this.city = city;
    this.street = street;
  },
  sayHello: function() {
    console.log('I am ' + this.name + '. My address is ' +
        this.country + ', ' + this.city + ', ' + this.street + '.');
  }
});

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

var p18 = new PTClassParisLover("Mary");
p18.setAddress("CH");
pending…
ExtJS Core
var ExtPerson = Ext.extend(Object, {
  constructor: function(name){
    this.name = name;
  },
  setAddress: function(country, city, street) {
    this.country = country;
    this.city = city;
    this.street = street;
  }
});

var ExtFrenchGuy = Ext.extend(ExtPerson, {
  constructor: function(name) {
    ExtFrenchGuy.superclass.constructor.call(this, name);
  },
  setAddress: function(city, street) {
    ExtFrenchGuy.superclass.setAddress.call('France', city, street);
  }
});

var ExtParisLover = Ext.extend(ExtFrenchGuy, {
  constructor: function(name) {
    ExtParisLover.superclass.constructor.call(name);
  },
  setAddress: function(street) {
    ExtParisLover.superclass.setAddress.call('Paris', street);
  }
});

var p19 = new ExtPerson("John");
p19.setAddress("US", "MT", "CH");

var p20 = new ExtFrenchGuy("Leo");
p20.setAddress("MT", "CH");

var p21 = new ExtParisLover("Mary");
p21.setAddress("CH");
pending…
Stapes
var StapesPerson = Stapes.subclass({
    constructor: function (name) {
        this.name = name;

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

var StapesFrenchGuy = StapesPerson.subclass({
  constructor: function(name) {
    StapesFrenchGuy.parent.constructor.apply(this, [name]);
  },
  setAddress: function(city, street) {
    StapesFrenchGuy.parent.setAddress.apply(this, ['France', city, street]);
  }
});

var StapesParisLover = StapesFrenchGuy.subclass({
  constructor: function(name) {
    StapesParisLover.parent.constructor.apply(this, [name]);
  },
  setAddress: function(street) {
    StapesParisLover.parent.setAddress.apply(this, ['Paris', street]);
  }
});

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

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

var p6 = new StapesParisLover("Mary");
p6.setAddress("CH");
pending…
RightJs
var RightJsPerson = new Class({
    initialize: function (name) {
        this.name = name;

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

var RightJsFrenchGuy = new Class(RightJsPerson, {
  constructor: function(name) {
    this.$super(name);
  },
  setAddress: function(city, street) {
    this.$super('France', city, street);
  }
});

var RightJsParisLover = new Class(RightJsFrenchGuy, {
  constructor: function(name) {
    this.$super(name);
  },
  setAddress: function(street) {
    this.$super('Paris', street);
  }
});

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

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

var p6 = new RightJsParisLover("Mary");
p6.setAddress("CH");
pending…
Ancestry
function AncestryPerson(name){
        this.name = name;

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

function AncestryFrenchGuy(name){
    AncestryFrenchGuy.superconstructor.call(this, name);
}
Ancestry.inherit(AncestryFrenchGuy, AncestryPerson, {
    setAddress: function(city, street) {
        AncestryPerson.prototype.setAddress.call(this, 'France', city, street);
  }
});

function AncestryParisLover(name){
    AncestryParisLover.superconstructor.call(this, name);
}
Ancestry.inherit(AncestryParisLover, AncestryFrenchGuy, {
    setAddress: function(street) {
        AncestryFrenchGuy.prototype.setAddress.call(this, 'Paris', street);
  }
});

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

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

var p6 = new AncestryParisLover("Mary");
p6.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