jsPerf.app is an online JavaScript performance benchmark test runner & jsperf.com mirror. It is a complete rewrite in homage to the once excellent jsperf.com now with hopefully a more modern & maintainable codebase.
jsperf.com URLs are mirrored at the same path, e.g:
https://jsperf.com/negative-modulo/2
Can be accessed at:
https://jsperf.app/negative-modulo/2
Performance comparison between multiple JavaScript class systems that provide this.super like in John Resig's implementation or equivalent (this.super is a property that directly gives the super method, without the need for more code).
<script src="https://rawgithub.com/jashkenas/underscore/1.5.2/underscore.js" type="text/javascript"></script>
<script src="https://rawgithub.com/nicolas-van/ring.js/1.0.0/ring.js" type="text/javascript"></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://cdn.sencha.com/ext-4.1.1a-gpl/builds/ext-foundation.js">
</script>
<script src="http://indigounited.com/dejavu/dejavu.js">
</script>
<script src="https://rawgithub.com/weikinhuang/Classify/v0.13.0/dist/classify.js"></script>
<script>
var RingPerson = ring.create({
init: function(name) {
this.name = name;
},
setAddress: function(country, city, street) {
this.country = country;
this.city = city;
this.street = street;
}
});
var RingFrenchGuy = ring.create([RingPerson], {
init: function(name) {
this.$super(name);
},
setAddress: function(city, street) {
this.$super('France', city, street);
}
});
var RingParisLover = ring.create([RingFrenchGuy], {
init: function(name) {
this.$super(name);
},
setAddress: function(street) {
this.$super('Paris', street);
}
});
</script>
<script>
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);
}
});
</script>
<script>
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);
}
});
</script>
<script>
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);
}
});
</script>
<script>
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);
}
});
</script>
<script>
Ext.define('ExtPerson', {
constructor: function(name) {
this.name = name;
},
setAddress: function(country, city, street) {
this.country = country;
this.city = city;
this.street = street;
}
});
Ext.define('ExtChinaGuy', {
extend: 'ExtPerson',
constructor: function() {
this.callParent(arguments);
},
setAddress: function(city, street) {
this.callParent(['China', city, street]);
}
});
Ext.define('ExtBeiJingLover', {
extend: 'ExtChinaGuy',
constructor: function(name) {
this.callParent(arguments);
},
setAddress: function(street) {
this.callParent(['BeiJing', street]);
}
});
</script>
<script>
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,
initialize: function(name) {
this.$super(name);
},
setAddress: function(city, street) {
this.$super('France', city, street);
}
});
var dejavuClassParisLover = dejavu.Class.declare({
$extends: dejavuClassFrenchGuy,
initialize: function(name) {
this.$super(name);
},
setAddress: function(street) {
this.$super('Paris', street);
}
});
</script>
<script>
var ClassifyPerson = Classify({
init: function (name) {
this.name = name;
},
setAddress: function(country, city, street) {
this.country = country;
this.city = city;
this.street = street;
}
});
var ClassifyFrenchGuy = Classify(ClassifyPerson, {
init: function (name) {
this.$$parent(name);
},
setAddress: function(city, street) {
this.$$parent("France", city, street);
}
});
var ClassifyParisLover = Classify(ClassifyFrenchGuy, {
init: function (name) {
this.$$parent(name);
},
setAddress: function(street) {
this.$$parent("Paris", street);
}
});
</script>
Ready to run.
Test | Ops/sec | |
---|---|---|
Ring.js |
| ready |
John Resig's |
| ready |
Klass |
| ready |
Classy |
| ready |
PTClass |
| ready |
Ext |
| ready |
dejavu |
| ready |
Classifyjs |
| ready |
You can edit these tests or add more tests to this page by appending /edit to the URL.