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 src="https://rawgithub.com/fnando/module/master/module.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;
}
});
</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 + '.');
}
});
</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;
}
});
</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;
}
});
</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;
}
});
</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;
}
});
</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;
}
});
</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;
}
});
</script>
<script>
Module("ModulePerson", function(ModulePerson){
ModulePerson.fn.initialize = function(name) {
this.name = name;
};
ModulePerson.fn.setAddress = function(country,city,street){
this.country = country;
this.city = city;
this.street = street;
};
});
</script>
<script>
function PlainInlineJSPerson(name) {
this.name = name;
this.setAddress = function(country, city, street) {
this.country = country;
this.city = city;
this.street = street;
};
}
</script>
<script>
function PlainPrototypeJSPerson(name) {
this.name = name;
}
PlainPrototypeJSPerson.prototype.setAddress = function(country, city, street) {
this.country = country;
this.city = city;
this.street = street;
};
</script>
<script>
function LiteralPerson(name) {
return {
name: name,
setAddress : function(country, city, street) {
this.country = country;
this.city = city;
this.street = street;
}
};
};
</script>
<script>
var objectCreatePersonProto = {
name: null,
setAddress : function(country, city, street) {
this.country = country;
this.city = city;
this.street = street;
}
};
function ObjectCreatePerson(name) {
var result = Object.create(objectCreatePersonProto);
result.name = name;
return result;
};
</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 |
| Modulejs | | ready |
| Plain JS (all in function) | | ready |
| Plain JS (with prototype) | | ready |
| Object Literal | | ready |
| Object create | | ready |
You can edit these tests or add more tests to this page by appending /edit to the URL.