Skip to content

Instantly share code, notes, and snippets.

@alexmacy

alexmacy/.block

Last active July 2, 2017 21:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save alexmacy/6040025c07947842c38a037c6d8f9d82 to your computer and use it in GitHub Desktop.
Save alexmacy/6040025c07947842c38a037c6d8f9d82 to your computer and use it in GitHub Desktop.
Download ZIP
Turbo.js Speed Test
Raw
.block
license: mit
Raw
README.md

A very bare bones speed test for comparing turbo.js to vanilla.js. Only tested in Chrome on a destop computer.

Raw
index.html
<!DOCTYPE html>
<style>
div {
margin: 10px;
}
</style>
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="//turbo.github.io/js/turbo.js"></script>
<div>
<input type="range" value="6" min="1" max="7" oninput="updateMagnitude(this.value)" onchange="reset()">
<text class="mag-val">Length of test array: 1e7</text>
</div>
<div>
<button onclick="testing = true;runTest()">Start test</button>
<button onclick="testing = false">Stop test</button>
<button onclick="reset()">Reset</button>
</div>
<div><h3>Average Duration </h3></div>
<svg></svg>
<div class="count"></div>
<script>
let turboData, vanillaData;
let arrayLength = 1e6;
let count = 0;
let testing = false;
let results = { vanilla: 0, turbo: 0 };
let maxDuration = 0;
const barWidth = 20;
const svg = d3.select("svg")
.attr("width", innerWidth)
.attr("height", 90);
const labels = svg.append("g").selectAll("text")
.data(["vanilla", "turbo"])
.enter().append("text")
.attr("text-anchor", "end")
.attr("x", 75)
.attr("y", function(d, i) {return i * 50 + barWidth + 5})
.text(function(d) {return d + ".js"})
const bars = svg.append("g").selectAll("rect")
.data(["vanilla", "turbo"])
.enter().append("rect")
.style("fill", "#005500")
.attr("y", function(d, i) {return i * 50})
.attr("height", barWidth * 2)
.attr("x", 85)
const textValues = svg.append("g").selectAll("text")
.data(["vanilla", "turbo"])
.enter().append("text")
.attr("y", function(d, i) {return i * 50 + barWidth + 5})
function reDraw() {
bars.attr("width", function(d) {return results[d] / count || 0});
textValues.attr("x", function(d) {return results[d] / count + 95 || 95})
.text(function(d) {
return count ? d3.format(".4f")(results[d] / count) + "ms" : "(no data)"})
document.querySelector(".count").innerHTML = "iterations: " + count;
}
updateMagnitude(6);
reset();
function reset() {
count = 0;
testing = false;
results = { vanilla: 0, turbo: 0 };
maxDuration = 0;
turboData = turbojs.alloc(arrayLength);
for (i = 0; i <= arrayLength; i++) turboData.data[i] = i;
vanillaData = new Array(arrayLength);
for (i = 0; i <= arrayLength; i++) vanillaData[i] = i;
reDraw();
}
function updateMagnitude(value) {
arrayLength = Number('1e' + value);
document.querySelector(".mag-val").innerHTML = "Length of test array: " + d3.format(",")(arrayLength);
}
function runTest() {
if (testing === false) return;
count += 1;
vanillaTest();
turboTest();
reDraw();
requestAnimationFrame(runTest)
}
function vanillaTest() {
const start = window.performance.now()
for (let i in vanillaData) vanillaData[i] *= 4;
const thisDuration = window.performance.now() - start;
maxDuration = Math.max(maxDuration, thisDuration);
results.vanilla += thisDuration;
}
function turboTest() {
const start = window.performance.now()
turbojs.run(turboData, `void main(void) { commit(read() * 4.); }`);
const thisDuration = window.performance.now() - start;
maxDuration = Math.max(maxDuration, thisDuration);
results.turbo += thisDuration;
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment