Skip to content

Instantly share code, notes, and snippets.

@DerekZiemba

DerekZiemba/index.html

Last active March 13, 2020 23:56
Show Gist options
  • Save DerekZiemba/b5d3ec32e4fae1606cafae8f309659aa to your computer and use it in GitHub Desktop.
Save DerekZiemba/b5d3ec32e4fae1606cafae8f309659aa to your computer and use it in GitHub Desktop.
Download ZIP
ES6 Classes vs Closures vs ES5 "Classes" (http://jsbench.github.io/#b5d3ec32e4fae1606cafae8f309659aa) #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 = 1000;
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.airInLungs = 0;
this.lungCapacity = limit(lungCapacity);
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) {
var airInLungs = 0, lungCapacity = limit(lungCapacity), output = 'mhm';
function limit(lungcap) { return Math.min(lungcap, maxCapacity); }
function resetoutput() { output = 'm'; }
function breathe() { airInLungs = lungCapacity; }
function moo() {
resetoutput();
while (airInLungs-- > 0) { output += 'o'; }
return output;
}
return { breathe: breathe, moo: moo };
}
};
Benchmark.prototype.teardown = function () {
for (var i = 0; i < maxCows; i++) { herd[i] = null; }
};
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.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