Skip to content

Instantly share code, notes, and snippets.

@ziriax

ziriax/index.html

Forked from DerekZiemba/index.html
Last active December 7, 2019 11:05
Show Gist options
  • Save ziriax/68b5db1b478dbb447abec7af4dd2af51 to your computer and use it in GitHub Desktop.
Save ziriax/68b5db1b478dbb447abec7af4dd2af51 to your computer and use it in GitHub Desktop.
Download ZIP
ES6 Classes vs Closures vs ES5 "Classes" (http://jsbench.github.io/#68b5db1b478dbb447abec7af4dd2af51) #jsbench #jsperf
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>ES6 Classes vs Closures vs ES5 "Classes"</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
<script src="./suite.js"></script>
</head>
<body>
<h1>Open the console to view the results</h1>
<h2><code>cmd + alt + j</code> or <code>ctrl + alt + j</code></h2>
</body>
</html>
Raw
suite.js
"use strict";
(function (factory) {
if (typeof Benchmark !== "undefined") {
factory(Benchmark);
} else {
factory(require("benchmark"));
}
})(function (Benchmark) {
var suite = new Benchmark.Suite;
Benchmark.prototype.setup = function () {
var maxCows = 2000;
var maxCapacity = 200;
var herd = Array(maxCows);
class ES6Cow {
constructor(lungCapacity) {
this.lungCapacity = this.limit(lungCapacity);
this.airInLungs = 0;
this.output = 'mhm';
}
breathe() {
this.airInLungs = this.lungCapacity;
}
resetoutput() {
this.output = 'm';
}
limit(lungCapacity) {
return Math.min(lungCapacity, maxCapacity);
}
moo() {
this.resetoutput();
while (this.airInLungs-- > 0) { this.output += 'o'; }
return this.output;
}
}
var ES5Cow_ES6Equivalent = (function () {
function Cow(lungCapacity) {
this.lungCapacity = this.limit(lungCapacity);
this.airInLungs = 0;
this.output = 'mhm';
}
Cow.prototype.limit = function (lungCapacity) {
return Math.min(lungCapacity, maxCapacity);
};
Cow.prototype.resetoutput = function () {
this.output = 'm';
};
Cow.prototype.breathe = function () {
this.airInLungs = this.lungCapacity;
};
Cow.prototype.moo = function () {
this.resetoutput();
while (this.airInLungs-- > 0) { this.output += 'o'; }
return this.output;
};
return Cow;
}());
var ES5Cow = (function () {
function resetoutput(inst) {
inst.output = 'm';
}
function limit(lungCapacity) {
return Math.min(lungCapacity, maxCapacity);
}
function Cow(lungCapacity) {
this.lungCapacity = limit(lungCapacity);
this.airInLungs = 0;
this.output = 'mhm';
}
Cow.prototype.breathe = function () {
this.airInLungs = this.lungCapacity;
}
Cow.prototype.moo = function () {
resetoutput(this);
while (this.airInLungs-- > 0) { this.output += 'o'; }
return this.output;
}
return Cow;
}());
function CowClosure(lungCapacity) {
lungCapacity = limit(lungCapacity);
var airInLungs = 0;
var output = 'mhm';
function resetoutput() {
output = 'm';
}
function limit(lungcap) {
return Math.min(lungcap, maxCapacity);
}
function breathe() {
airInLungs = lungCapacity;
}
function moo() {
resetoutput();
while (airInLungs-- > 0) { output += 'o'; }
return output;
}
return { breathe: breathe, moo: moo };
}
function cow_limit(lungcap) {
return Math.min(lungcap, maxCapacity);
}
function CowObject(lungCapacity) {
lungCapacity = cow_limit(lungCapacity);
return {lungCapacity, airInLungs: 0, output: 'mhm'};
}
function cow_resetoutput(obj) {
obj.output = 'm';
}
function cow_breathe(obj) {
obj.airInLungs = obj.lungCapacity;
}
function cow_moo(obj) {
cow_resetoutput(obj);
while (obj.airInLungs-- > 0) { obj.output += 'o'; }
return obj.output;
}
herd.length = maxCows;
};
Benchmark.prototype.teardown = function () {
herd.length = 0;
};
suite.add("var i = 0;", function () {
var i = 0;
for (i = 0; i < maxCows; i++) {
herd[i] = new ES6Cow(i);
}
for (i = 0; i < maxCows; i++) {
herd[i].breathe();
}
for (i = 0; i < maxCows; i++) {
herd[i].moo();
}
});
suite.add("var i = 0;", function () {
var i = 0;
for (i = 0; i < maxCows; i++) {
herd[i] = new ES5Cow_ES6Equivalent(i);
}
for (i = 0; i < maxCows; i++) {
herd[i].breathe();
}
for (i = 0; i < maxCows; i++) {
herd[i].moo();
}
});
suite.add("var i = 0;", function () {
var i = 0;
for (i = 0; i < maxCows; i++) {
herd[i] = new ES5Cow(i);
}
for (i = 0; i < maxCows; i++) {
herd[i].breathe();
}
for (i = 0; i < maxCows; i++) {
herd[i].moo();
}
});
suite.add("var i = 0;", function () {
var i = 0;
for (i = 0; i < maxCows; i++) {
herd[i] = CowClosure(i);
}
for (i = 0; i < maxCows; i++) {
herd[i].breathe();
}
for (i = 0; i < maxCows; i++) {
herd[i].moo();
}
});
suite.add("var i = 0;", function () {
var i = 0;
for (i = 0; i < maxCows; i++) {
herd[i] = CowObject(i);
}
for (i = 0; i < maxCows; i++) {
cow_breathe(herd[i]);
}
for (i = 0; i < maxCows; i++) {
cow_moo(herd[i]);
}
});
suite.on("cycle", function (evt) {
console.log(" - " + evt.target);
});
suite.on("complete", function (evt) {
console.log(new Array(30).join("-"));
var results = evt.currentTarget.sort(function (a, b) {
return b.hz - a.hz;
});
results.forEach(function (item) {
console.log((idx + 1) + ". " + item);
});
});
console.log("ES6 Classes vs Closures vs ES5 \"Classes\"");
console.log(new Array(30).join("-"));
suite.run();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment