benchmark
Version:
A benchmarking library that works on nearly all JavaScript platforms, supports high-resolution timers, and returns statistically significant results.
177 lines (149 loc) • 4.93 kB
HTML
<html>
<head>
<title>shootout</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
background-color: #eee;
font-family: Helvetica, Arial, sans-serif;
margin: 0 10%;
text-shadow: white 1px 1px 0px;
}
p {
color: #777;
}
#header p {
color: #555;
font-size: 1.1em;
font-weight: bold;
}
h1 {
font-size: 7em;
font-weight: bold;
color: #333;
margin-top: 0.10em;
margin-bottom: -0.25em;
}
.chart {
border: 4px solid #ccc;
float: left;
margin-right: 1em;
margin-bottom: 1em;
}
#control {
margin-bottom: 1em;
}
#progress {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border: 1px solid #aaa;
padding: 2px;
}
#progress div {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
height: 25px;
width: 0%;
background-color: #888;
}
</style>
</head>
<body>
<div id="header">
<h1>shootout</h1>
<p>Template benchmarks (ops per millisecond)</p>
</div>
<div id="control">
<div id="progress"><div></div></div>
<button id="run" style="display:none;">Run</button>
</div>
<div id="content">
<div id="charts"></div>
<p style="clear: both">Targets: <a href="http://akdubya.github.com/dustjs">Dust</a>, <a href="http://github.com/wycats/handlebars.js">Handlebars</a>, <a href="http://mustache.github.com/">Mustache</a>, <a href="http://api.jquery.com/tmpl/">jquery-tmpl</a>. Each benchmark runs once using an adaptive test cycles algorithm similar to the one found in <a href="http://github.com/broofa/jslitmus">jslitmus</a>.</p>
</div>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.0', {packages: ['imagechart']});
</script>
<script>
$(document).ready(function(){
var arr = [1, 5, 4, 2, 3],
i = 1;
var testQueue = [
new Benchmark(function() {
var x = arr;
x.sort(function(a, b) {
return a - b;
});
}, { 'name': 'Sort ascending' }),
new Benchmark(function() {
var x = arr;
x.sort(function(a, b) {
return b - a;
});
}, { 'name': 'Sort descending' }),
new Benchmark(function() {
var foo, x = i;
while (x--) {
foo = Array(x).join('-');
}
}, { 'name': 'Don\'t sort at all' }),
new Benchmark(function() {
var x = arr,
y = ~~(Math.random() * 100);
while (y--) {
if (arr[y]) {
arr[y];
}
}
}, { 'name': 'Just another unrelated test' })
];
result: function(name, stats) {
var opms = stats.iterations/stats.elapsed;
rows.push([name, opms]);
},
Benchmark.invoke(testQueue, "on", "start", function(bench) {
start: function() {
$('#charts').append("<div id=\"" + bench.name + "\" class=\"chart\"></div>");
},
done: function() {
var pct = parseFloat($bar.css('width')) + tick;
drawBarChart(type, rows);
$('#progress > div').css('width', pct + "%");
next();
}
var $bar = $('#progress > div');
var tick;
function runAll() {
$bar.css('width', "0%");
$('#progress').show();
tick = 100 / testQueue.length;
$('#charts').empty();
Benchmark.invoke(testQueue, {
'name': 'run',
'onComplete': function() {
$('#progress').fadeOut(1000, function() {
$('#run').fadeIn();
});
}
});
}
function drawBarChart(type, rows) {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn("string", "engine");
dataTable.addColumn("number", "ops");
dataTable.addRows(rows);
var chart = new google.visualization.ImageChart(document.getElementById(type));
chart.draw(dataTable, {title: type, cht: 'bhs', chs: '420x175'});
}
$('#run').click(function() {
$('#run').hide();
runAll();
return false;
});
runAll();
});
</script>
</body>
</html>