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
I've started this performance page because we have been facing memory issues with an App. I have used as a base information from the article: http://coding.smashingmagazine.com/2012/11/05/writing-fast-memory-efficient-javascript/ and then added extra posibilities to implement a better or worst pattern. I hope to see improvements.
Follow Me on Twitter @efsandino
<script>
// Implementation of a JS Class with Prototype Pattern
Klass1 = function () {
this.val = 0;
}
Klass1.prototype.foo = function () {
log('foo');
}
Klass1.prototype.bar = function () {
log('bar');
}
Klass1.prototype.fn = function (val) {
this.val = val + this.val;
}
Klass1.prototype.method1 = function () {};
Klass1.prototype.method2 = function () {};
Klass1.prototype.method3 = function () {};
Klass1.prototype.method4 = function () {};
Klass1.prototype.method5 = function () {};
Klass1.prototype.method6 = function () {};
Klass1.prototype.method7 = function () {};
Klass1.prototype.method8 = function () {};
Klass1.prototype.method9 = function () {};
Klass1.prototype.method10 = function () {};
Klass1.prototype.method11 = function () {};
// Implementation of a JS Class with Module Pattern
Klass2 = function () {
var val = 0;
var foo = function () {
log('foo');
},
bar = function () {
log('bar');
};
var fn2 = function (_val) {
val = _val + val;
}
var method1 = function () {};
var method2 = function () {};
var method3 = function () {};
var method4 = function () {};
var method5 = function () {};
var method6 = function () {};
var method7 = function () {};
var method8 = function () {};
var method9 = function () {};
var method10 = function () {};
var method11 = function () {};
return {
foo: foo,
bar: bar,
fn: fn2,
method1: method1,
method2: method2,
method3: method3,
method4: method4,
method5: method5,
method6: method6,
method7: method7,
method8: method8,
method9: method9,
method10: method10,
method11: method11
}
}
// Implementation of a JS Class with Module Pattern + Cached Functions
var FooFunction = function () {
log('foo');
};
var BarFunction = function () {
log('bar');
};
var c3method1 = function () {};
var c3method2 = function () {};
var c3method3 = function () {};
var c3method4 = function () {};
var c3method5 = function () {};
var c3method6 = function () {};
var c3method7 = function () {};
var c3method8 = function () {};
var c3method9 = function () {};
var c3method10 = function () {};
var c3method11 = function () {};
var fn3 = function (val) {
this.val = val + this.val;
}
Klass3 = function () {
return {
val: 0,
foo: FooFunction,
bar: BarFunction,
fn: fn3,
c3method1: c3method1,
c3method2: c3method2,
c3method3: c3method3,
c3method4: c3method4,
c3method5: c3method5,
c3method6: c3method6,
c3method7: c3method7,
c3method8: c3method8,
c3method9: c3method9,
c3method10: c3method10,
c3method11: c3method11
}
}
// Implements of JS Class with Module Pattern + Dinamyc Functions
Klass4 = function () {
var val = 0;
return {
foo: function () {
log('foo');
},
bar: function () {
log('bar');
},
fn: function (_val) {
val = _val + val
},
method1: function(){},
method2: function(){},
method3: function(){},
method4: function(){},
method5: function(){},
method6: function(){},
method7: function(){},
method8: function(){},
method9: function(){},
method10: function(){},
method11: function(){}
}
};
// Implement of JS Class with Module Pattern + Anonymous Cached Functions
var FooFunctionY = function () {
log('foo');
};
var BarFunctionY = function () {
log('bar');
};
var fn6 = function (val) {
this.val = this.val + val;
}
var c6method1 = function () {};
var c6method2 = function () {};
var c6method3 = function () {};
var c6method4 = function () {};
var c6method5 = function () {};
var c6method6 = function () {};
var c6method7 = function () {};
var c6method8 = function () {};
var c6method9 = function () {};
var c6method10 = function () {};
var c6method11 = function () {};
var KlassY = (function () {
var my = {
val: 0
};
my.log = FooFunctionY;
my.bar = BarFunctionY;
my.fn = fn6;
my.c6method1 = c6method1;
my.c6method2 = c6method2;
my.c6method3 = c6method3;
my.c6method4 = c6method4;
my.c6method5 = c6method5;
my.c6method6 = c6method6;
my.c6method7 = c6method7;
my.c6method8 = c6method8;
my.c6method9 = c6method9;
my.c6method10 = c6method10;
my.c6method11 = c6method11;
return my;
})();
Klass6 = function () {
return {
log: KlassY.log,
bar: KlassY.bar,
fn: KlassY.fn,
c6method1: KlassY.c6method1,
c6method2: KlassY.c6method2,
c6method3: KlassY.c6method3,
c6method4: KlassY.c6method4,
c6method5: KlassY.c6method5,
c6method6: KlassY.c6method6,
c6method7: KlassY.c6method7,
c6method8: KlassY.c6method8,
c6method9: KlassY.c6method9,
c6method10: KlassY.c6method10,
c6method11: KlassY.c6method11
}
}
</script>
console.log(o)
Ready to run.
Test | Ops/sec | |
---|---|---|
Prototypal |
| ready |
Module Pattern |
| ready |
Module Pattern With Cached Functions |
| ready |
Module Pattern + Dinamyc Functions |
| ready |
Module Pattern + Anonymous Functions |
| ready |
Module Pattern + Anonymous Cached Functions |
| ready |
You can edit these tests or add more tests to this page by appending /edit to the URL.