182 lines
4.9 KiB
HTML
182 lines
4.9 KiB
HTML
<html>
|
|
<!--
|
|
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
|
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
|
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
|
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
|
Code distributed by Google as part of the polymer project is also
|
|
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
|
-->
|
|
<head>
|
|
<title>Observation Benchmarks</title>
|
|
<meta charset="utf-8">
|
|
<script src="../src/observe.js"></script>
|
|
<script src="chartjs/Chart.js"></script>
|
|
<script src="benchmark.js"></script>
|
|
<script src="observation_benchmark.js"></script>
|
|
<style>
|
|
* {
|
|
font-family: arial, helvetica, sans-serif;
|
|
font-weight: 400;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: rgba(0, 0, 0, .1);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Observation Benchmarks</h1>
|
|
|
|
<select id="benchmarkSelect">
|
|
<option>ObjectBenchmark</option>
|
|
<option>SetupObjectBenchmark</option>
|
|
<option>ArrayBenchmark</option>
|
|
<option>SetupArrayBenchmark</option>
|
|
<option>PathBenchmark</option>
|
|
<option>SetupPathBenchmark</option>
|
|
</select>
|
|
<select id="configSelect">
|
|
</select>
|
|
|
|
<button id="go">Run Benchmarks</button>
|
|
|
|
<span>Object Count: </span>
|
|
<input id="objectCountInput" style="width: 200px" value="4000, 8000, 16000, 32000"><br>
|
|
<span>Mutation Count: </span>
|
|
<input id="mutationCountInput" style="width: 200px" value="0, 100, 200, 400, 800, 1600"><br>
|
|
<br>
|
|
<span id="status"></span>
|
|
|
|
<section style="width: 100%">
|
|
<article>
|
|
<div style="display:inline-block; padding-bottom: 20px">
|
|
Times in ms
|
|
</div>
|
|
<div style="display:inline-block">
|
|
<canvas id="times" width="800" height="400"></canvas>
|
|
</div>
|
|
<div style="display:inline-block">
|
|
<ul id="legendList">
|
|
</ul>
|
|
</div>
|
|
</article>
|
|
</section>
|
|
<h3 style="margin-left: 440px">Object Set Size</h3>
|
|
<script>
|
|
var benchmark;
|
|
var goButton = document.getElementById('go');
|
|
|
|
var objectCountInput = document.getElementById('objectCountInput');
|
|
var mutationCountInput = document.getElementById('mutationCountInput');
|
|
|
|
var statusSpan = document.getElementById('status');
|
|
|
|
var timesCanvas = document.getElementById('times');
|
|
var benchmarkSelect = document.getElementById('benchmarkSelect');
|
|
var configSelect = document.getElementById('configSelect');
|
|
|
|
function changeBenchmark() {
|
|
benchmark = window[benchmarkSelect.value];
|
|
configSelect.textContent = '';
|
|
benchmark.configs.forEach(function(config) {
|
|
var option = document.createElement('option');
|
|
option.textContent = config;
|
|
configSelect.appendChild(option);
|
|
});
|
|
|
|
document.title = benchmarkSelect.value;
|
|
}
|
|
|
|
benchmarkSelect.addEventListener('change', changeBenchmark);
|
|
|
|
changeBenchmark();
|
|
var ul = document.getElementById('legendList');
|
|
var colors = [
|
|
[0, 0, 255],
|
|
[138,43,226],
|
|
[165,42,42],
|
|
[100,149,237],
|
|
[220,20,60],
|
|
[184,134,11]
|
|
].map(function(rgb) {
|
|
return 'rgba(' + rgb.join(',') + ',.7)';
|
|
});
|
|
|
|
goButton.addEventListener('click', function() {
|
|
goButton.disabled = true;
|
|
goButton.textContent = 'Running...';
|
|
ul.textContent = '';
|
|
|
|
var objectCounts = objectCountInput.value.split(',').map(function(val) {
|
|
return Number(val);
|
|
});
|
|
var mutationCounts = mutationCountInput.value.split(',').map(function(val) {
|
|
return Number(val);
|
|
});
|
|
|
|
mutationCounts.forEach(function(count, i) {
|
|
var li = document.createElement('li');
|
|
li.textContent = count + ' mutations.'
|
|
li.style.color = colors[i];
|
|
ul.appendChild(li);
|
|
});
|
|
|
|
var results = [];
|
|
|
|
function benchmarkComplete(times) {
|
|
timesArray = [];
|
|
var index = 0;
|
|
|
|
|
|
mutationCounts.forEach(function(mutationCount, i) {
|
|
timesArray.push([]);
|
|
objectCounts.forEach(function(objectCount, j) {
|
|
timesArray[i][j] = times[j][i];
|
|
});
|
|
});
|
|
|
|
timesCanvas.height = 400;
|
|
timesCanvas.width = 800;
|
|
timesCanvas.setAttribute('style', '');
|
|
|
|
var ctx = timesCanvas.getContext("2d");
|
|
new Chart(ctx).Line({
|
|
labels: objectCounts,
|
|
datasets: timesArray.map(function(times, i) {
|
|
return {
|
|
fillColor: 'rgba(255, 255, 255, 0)',
|
|
strokeColor: colors[i],
|
|
pointColor: colors[i],
|
|
pointStrokeColor: "#fff",
|
|
data: times
|
|
};
|
|
})
|
|
}, {
|
|
bezierCurve: false
|
|
});
|
|
|
|
goButton.disabled = false;
|
|
goButton.textContent = 'Run Benchmarks';
|
|
statusSpan.textContent = '';
|
|
}
|
|
|
|
function updateStatus(benchmark, mutationCount, count) {
|
|
statusSpan.textContent = 'Testing: ' +
|
|
benchmark.objectCount + ' objects, ' +
|
|
mutationCount + ' mutations ... ' +
|
|
count + ' runs';
|
|
}
|
|
|
|
var benchmarks = objectCounts.map(function(objectCount) {
|
|
return new benchmark(configSelect.value, objectCount);
|
|
});
|
|
|
|
Benchmark.all(benchmarks, mutationCounts, updateStatus)
|
|
.then(benchmarkComplete);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|