You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
228 lines
6.6 KiB
228 lines
6.6 KiB
<!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> |
|
|
|
<!-- 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>
|
|
|