dijit
Version:
Dijit provides a complete collection of user interface controls based on Dojo, giving you the power to create web applications that are highly optimized for usability, performance, internationalization, accessibility, but above all deliver an incredible u
229 lines (188 loc) • 6.77 kB
HTML
<html>
<head>
<title>Dojo interactive benchmark tool</title>
<!-- make display better on mobile, so that results appear under the controls rather than to the right of them -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
@import "../../dijit/themes/claro/claro.css";
@import "../themes/claro/document.css";
@import "../../dijit/tests/css/dijitTests.css";
#resultsContainer, #testControl, #submitControl {
margin: 20px;
padding:12px;
background-color:#fff;
-moz-border-radius:8pt 8pt;
-webkit-border-radius:7pt;
border:2px solid #ededed;
}
#resultsContainer {
padding-top: 0;
}
#results { overflow:auto; min-height:100px; border:1px solid #ccc; color:darkred; padding:8px; }
.runHolder, .submitButton {
border:1px solid #ccc; padding:3px;
-moz-border-radius:8pt 8pt;
-webkit-border-radius:7pt;
text-align:center;
cursor:pointer; background-color:#ededed; display:block; width:125px;
}
</style>
<script type="text/javascript" src="../../dojo/dojo.js"></script>
<script type="text/javascript">
// basic stats are located at http://dante.dojotoolkit.org/benchmarks/
dojo.require("dojo.fx");
dojo.require("dijit.dijit");
dojo.require("dijit.form.ComboBox");
dojo.require("dojo.parser");
// setup global variables
var masterResults = { clientNavigator: navigator.userAgent, dataSet: [], errors: [] };
var isRunning = false;
var theCount, theClass, runner = null;
var testCount = 0;
dojo.ready(function(){
theCount = dojo.byId('countNode');
runner = dojo.byId('runner');
masterResults.dojoVersion = dojo.version.toString();
dojo.parser.parse(); // instantiate the ComboBox
theClass = dijit.byId('classNode');
});
function _toggleRunMsg(){
var newMsg = (isRunning) ? " Run Test " : " Running ...";
dojo.fx.chain([
dojo.fadeOut({
node:runner,
duration:200,
onEnd: function(){
runner.innerHTML = newMsg;
isRunning=!isRunning;
}
}),
dojo.fadeIn({ node:runner, duration: 200 })
]).play();
}
function runTest(){
if(isRunning){ return; }
_toggleRunMsg();
setTimeout(function(){ _runRealTest(); },1000);
}
function _runRealTest(){
// Remove widgets from previous run
dojo.forEach(dijit.findWidgets(dojo.byId("widgetsContainer")), function(widget){
widget.destroyRecursive();
});
var count = theCount.value,
aclass = theClass.get("value"),
theMethod = dojo.query("input[name=theMethod]").filter(function(node){ return node.checked; }).attr("value")[0],
tmpNode = document.createElement('div'),
startTimer;
try{
dojo.require(/dojox\.mobile\.[A-Z]/.test(aclass) ? "dojox.mobile._base" : aclass);
dojo.ready(function(){
var i;
switch(theMethod){
case "parse" :
case "fastparse" :
var tmpString = [];
var tag = /Button/.test(aclass) ? "button" : (/Text/.test(aclass) ? "input" : "div");
for(i=0; i<count; i++){
tmpString.push(
'<', tag, ' ',
(theMethod == 'fastparse' ? 'data-dojo-type="' : 'dojoType="'),
aclass, '"></', tag, '>');
}
tmpNode.innerHTML = tmpString.join("");
startTimer = new Date().getTime();
dojo.parser.parse(tmpNode);
break;
case "create" :
var construction = dojo.getObject(aclass);
startTimer = new Date().getTime();
for(i=0; i<count; i++){
var tmp = new construction({});
tmpNode.appendChild(tmp.domNode);
}
break;
}
// Render the widgets in a visible <div> as part of benchmark
dojo.byId("widgetsContainer").appendChild(tmpNode);
// [Some] browsers defer rendering until after JS finishes running
// so use a setTimeout(, 0) to make sure widgets render.
setTimeout(function(){
var endTime = new Date().getTime() - startTimer;
var average = (endTime / count);
var msg = "It took: "+endTime+"ms to "+theMethod+" "+count+" "+aclass+" widgets"+
"<br>(average: "+average+" ms/widget)<br><br>";
masterResults.dataSet.push({
testNum: ++testCount,
dijit: aclass,
testCount: count,
testAverage: average,
testMethod: theMethod,
testTime: endTime
});
dojo.byId("results").innerHTML += msg;
dojo.byId("mailto").href = "mailto:?subject=test results&body=" +
encodeURIComponent(dojo.byId("results").innerText || dojo.byId("results").textContent);
setTimeout(function(){ _toggleRunMsg(); },250);
}, 0);
});
}catch(e){
setTimeout(function(){ _toggleRunMsg(); },250);
console.error("Ooops:", e);
}
}
function doDebug(){
dojo.byId('hiddenHolder').value = dojo.toJson(masterResults);
return true;
}
</script>
</head>
<body class="claro">
<h1 class="testTitle">Dojo Benchmark Tool</h1>
<div id="testControl">
Class:
<select data-dojo-type="dijit/form/ComboBox"
data-dojo-props='name:"dijit", id:"classNode", value:"dijit.form.Button", style:{width:"200px"}'>
<option>dijit.form.Button</option>
<option>dojox.mobile.Button</option>
<option>dijit.form.TextBox</option>
<option>dojox.mobile.app.TextBox</option>
</select>
<br><br>
Count: <input type="text" name="count" id="countNode" value="100" size="4" ><br><br>
Method:
<br>
<label for="parse">
<input type="radio" name="theMethod" value="parse" id="parse" checked="on"> Parse with 1.x dojoType syntax
</label>
<br>
<label for="fastparse">
<input type="radio" name="theMethod" value="fastparse" id="fastparse"> Parse with 2.0 data-dojo-type syntax
</label>
<br>
<label for="create">
<input type="radio" name="theMethod" value="create" id="create"> Create programatically
</label>
<br><br>
<span onclick="runTest()" class="runHolder"><span id="runner"> Run Test </span></span>
</div>
<div id="resultsContainer"><h3>Results:</h3><div id="results"></div></div>
<div id="submitControl">
<p>
* The results of these tests are important to us. Please feel free to submit your dataSet
to Dojotoolkit.org. Your privacy will be respected.
</p>
<div id="hiddenResults">
<form id="resultForm" action="http://dante.dojotoolkit.org/benchmarks/submit.php"
method="POST" onsubmit="doDebug()">
<input type="hidden" id="hiddenHolder" value="" name="key">
<input type="submit" value=" Submit Data " class="submitButton">
</form>
</div>
<p>Alternately, <a id="mailto">mail results</a> to any email address.</p>
</div>
<div id="widgetsContainer" style="clear: both;"></div>
</body>
</html>