alexmacy/.block

## .block
license: mit

## README.md

      
                Raw

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

  
## 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>

## thumbnail.png

      
                Raw

        
              thumbnail.png
	<!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>