requirejs-dustjs
Version:
A requirejs plugin for loading and compiling dustjs templates.
162 lines (143 loc) • 4.92 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 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>