Blame | Last modification | View Log | RSS feed
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Dojo interactive benchmark tool</title>
<script type="text/javascript" src="../../dojo/dojo.js"></script>
<script type="text/javascript">
// FIXME:
// the url below points to dojo.inpdx.net/benchResults.php
// need to setup DB on dtk.org and change URL here to store
// results elsewhere ... work db structure in accompanying
// .php file
// basic stats are located at http://dojo.inpdx.net/benchmarks.html
dojo.require("dojo.fx");
// FIXME: this seems an excessive fix for IE6 issue ...
dojo.require("dijit.dijit");
// dojo.require("dijit.form.Button");
dojo.require("dijit.dijit-all");
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.addOnLoad(function(){
theCount = dojo.byId('countNode');
theClass = dojo.byId('classNode');
runner = dojo.byId('runner');
masterResults.dojoVersion = dojo.version.toString();
});
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("_runRealTest()",1000);
}
function _runRealTest(){
var _error = false;
var count = theCount.value;
var aclass = theClass.value.toString();
var theMethod = (dojo.byId('parse').checked) ? "parse" : "create";
var tmpNode = document.createElement('div');
switch(theMethod){
case "parse" :
var tmpString = [];
for(var i=0; i<count; i++){
tmpString.push('<div dojoType="', aclass, '"></div>');
}
tmpNode.innerHTML = tmpString.join("");
var tmpTimer = new Date().getTime();
dojo.parser.parse(tmpNode);
var endTime = new Date().getTime() - tmpTimer;
break;
case "create" :
var construction = dojo.getObject(aclass);
var tmpTimer = new Date().getTime();
for(var i=0; i<count; i++){
var tmp = new construction({});
tmpNode.appendChild(tmp.domNode);
}
var endTime = new Date().getTime() - tmpTimer;
break;
}
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;
setTimeout("_toggleRunMsg()",250);
// Nodes have to be in the document for IE7 to GC them.
// Do this after generating the widgets to dispel
// notion that widget parents have to be in document
// a-priori.
dojo.byId("limbo").appendChild(tmpNode);
}
function doDebug(){
var key = escape(dojo.toJson(masterResults));
dojo.byId('hiddenHolder').value = key;
return true;
}
</script>
<style>
@import "../../dijit/themes/tundra/tundra.css";
@import "../../dijit/themes/dijit.css";
@import "../../dojo/resources/dojo.css";
@import "../../dijit/tests/css/dijitTests.css";
#limbo {
display: none;
}
#theContainer {
float:left;
display: block; padding:12px; padding-top:0;
width:420px; margin-left:20px;
background-color:#fff; -moz-border-radius:8pt 8pt;
border:2px solid #ededed;
}
#leftControl { float:left; width:300px; }
#testControl, #submitControl { border:2px solid #ededed; padding:12px; -moz-border-radius:8pt 8pt; background-color:#fff; }
#results { overflow:auto; height:300px; border:1px solid #ccc; color:darkred; padding:8px; }
#results li { list-style-type: none; }
#results ul { margin:0; padding:0; }
.runHolder, .submitButton {
border:1px solid #ccc; padding:3px; -moz-border-radius:8pt 8pt; text-align:center;
cursor:pointer; background-color:#ededed; display:block; width:125px;
}
</style>
</head>
<body class="tundra">
<div id="limbo"></div>
<h1 class="testTitle">Dojo Benchmark Tool</h1>
<div id="leftControl">
<div id="testControl">
Class: <input type="text" name="dijit" id="classNode" value="dijit.form.Button"><br><br>
Count: <input type="text" name="count" id="countNode" value="100" size="4" ><br><br>
Method: <label for="parse">
<input type="radio" name="theMethod" value="parse" id="parse" checked="on"> Parse
</label>
<label for="create">
<input type="radio" name="theMethod" value="create" id="create"> Create
</label>
<br><br>
<span onclick="runTest()" class="runHolder"><span id="runner"> Run Test </span></span>
</div>
<br>
<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://dojo.inpdx.net/benchResults.php"
method="POST" onsubmit="doDebug()">
<input type="hidden" id="hiddenHolder" value="" name="key">
<input type="submit" value=" Submit Data " class="submitButton">
</form>
</div>
</div>
</div>
<div id="theContainer"><h3>Results:</h3><div id="results"></div></div>
</body>
</html>