161 lines
4.8 KiB
HTML
161 lines
4.8 KiB
HTML
<!DOCTYPE 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 src="../vendor/jquery.min.js"></script>
|
|
<script src="uubench.js"></script>
|
|
<script src="../dist/dust-full-0.2.5.min.js"></script>
|
|
<script src="suites/dust_suite.js"></script>
|
|
<script src="suites/mustache_suite.js"></script>
|
|
<script src="suites/handlebars_suite.js"></script>
|
|
<script src="suites/jquery_suite.js"></script>
|
|
<script src="http://github.com/wycats/handlebars.js/raw/766497bb553a926c046c5e5b50ee35529d168ba5/lib/handlebars.js"></script>
|
|
<script src="http://github.com/janl/mustache.js/raw/master/mustache.js"></script>
|
|
<script src="http://github.com/jquery/jquery-tmpl/raw/master/jquery.tmpl.js"></script>
|
|
<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 testQueue = [];
|
|
var $bar = $('#progress > div');
|
|
var tick;
|
|
|
|
function runAll() {
|
|
$bar.css('width', "0%");
|
|
$('#progress').show();
|
|
for (var key in dustBench.benches) { testQueue.push(key) }
|
|
tick = 100 / testQueue.length;
|
|
$('#charts').empty();
|
|
next();
|
|
}
|
|
|
|
function next() {
|
|
var test = testQueue.shift();
|
|
if (test) {
|
|
runSuite(test);
|
|
} else {
|
|
$('#progress').fadeOut(1000, function() {
|
|
$('#run').fadeIn();
|
|
});
|
|
}
|
|
}
|
|
|
|
function runSuite(type) {
|
|
var rows = [];
|
|
var suite = new uubench.Suite({
|
|
iterations: 1000,
|
|
result: function(name, stats) {
|
|
var opms = stats.iterations/stats.elapsed;
|
|
rows.push([name, opms]);
|
|
},
|
|
start: function() {
|
|
$('#charts').append("<div id=\"" + type + "\" class=\"chart\"></div>");
|
|
},
|
|
done: function() {
|
|
var pct = parseFloat($bar.css('width')) + tick;
|
|
drawBarChart(type, rows);
|
|
$('#progress > div').css('width', pct + "%");
|
|
next();
|
|
}
|
|
});
|
|
dustBench(suite, type, "dust");
|
|
handlebarsBench(suite, type, "handlebars");
|
|
mustacheBench(suite, type, "mustache");
|
|
jqueryBench(suite, type, "jquery");
|
|
suite.run();
|
|
}
|
|
|
|
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> |