benchTool.html 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2. "http://www.w3.org/TR/html4/strict.dtd">
  3. <html>
  4. <head>
  5. <title>Dojo interactive benchmark tool</title>
  6. <script type="text/javascript" src="../../dojo/dojo.js"></script>
  7. <script type="text/javascript">
  8. // FIXME:
  9. // the url below points to dojo.inpdx.net/benchResults.php
  10. // need to setup DB on dtk.org and change URL here to store
  11. // results elsewhere ... work db structure in accompanying
  12. // .php file
  13. // basic stats are located at http://dojo.inpdx.net/benchmarks.html
  14. dojo.require("dojo.fx");
  15. // FIXME: this seems an excessive fix for IE6 issue ...
  16. dojo.require("dijit.dijit");
  17. // dojo.require("dijit.form.Button");
  18. dojo.require("dijit.dijit-all");
  19. dojo.require("dojo.parser");
  20. // setup global variables
  21. var masterResults = { clientNavigator: navigator.userAgent, dataSet: [], errors: [] }
  22. var isRunning = false;
  23. var theCount, theClass, runner = null;
  24. var testCount = 0;
  25. dojo.addOnLoad(function(){
  26. theCount = dojo.byId('countNode');
  27. theClass = dojo.byId('classNode');
  28. runner = dojo.byId('runner');
  29. masterResults.dojoVersion = dojo.version.toString();
  30. });
  31. function _toggleRunMsg(){
  32. var newMsg = (isRunning) ? " Run Test " : " Running ..."
  33. dojo.fx.chain([
  34. dojo.fadeOut({
  35. node:runner,
  36. duration:200,
  37. onEnd: function(){
  38. runner.innerHTML = newMsg;
  39. isRunning=!isRunning;
  40. }
  41. }),
  42. dojo.fadeIn({ node:runner, duration: 200 })
  43. ]).play();
  44. }
  45. function runTest(){
  46. if(isRunning){ return; }
  47. _toggleRunMsg();
  48. setTimeout("_runRealTest()",1000);
  49. }
  50. function _runRealTest(){
  51. var _error = false;
  52. var count = theCount.value;
  53. var aclass = theClass.value.toString();
  54. var theMethod = (dojo.byId('parse').checked) ? "parse" : "create";
  55. var tmpNode = document.createElement('div');
  56. switch(theMethod){
  57. case "parse" :
  58. var tmpString = [];
  59. for(var i=0; i<count; i++){
  60. tmpString.push('<div dojoType="', aclass, '"></div>');
  61. }
  62. tmpNode.innerHTML = tmpString.join("");
  63. var tmpTimer = new Date().getTime();
  64. dojo.parser.parse(tmpNode);
  65. var endTime = new Date().getTime() - tmpTimer;
  66. break;
  67. case "create" :
  68. var construction = dojo.getObject(aclass);
  69. var tmpTimer = new Date().getTime();
  70. for(var i=0; i<count; i++){
  71. var tmp = new construction({});
  72. tmpNode.appendChild(tmp.domNode);
  73. }
  74. var endTime = new Date().getTime() - tmpTimer;
  75. break;
  76. }
  77. var average = (endTime / count);
  78. var msg = "It took: "+endTime+"ms to "+theMethod+" "+count+" "+aclass+" widgets"+
  79. "<br>(average: "+average+" ms/widget)<br><br>";
  80. masterResults.dataSet.push({
  81. testNum: ++testCount,
  82. dijit: aclass,
  83. testCount: count,
  84. testAverage: average,
  85. testMethod: theMethod,
  86. testTime: endTime
  87. });
  88. dojo.byId("results").innerHTML += msg;
  89. setTimeout("_toggleRunMsg()",250);
  90. // Nodes have to be in the document for IE7 to GC them.
  91. // Do this after generating the widgets to dispel
  92. // notion that widget parents have to be in document
  93. // a-priori.
  94. dojo.byId("limbo").appendChild(tmpNode);
  95. }
  96. function doDebug(){
  97. var key = escape(dojo.toJson(masterResults));
  98. dojo.byId('hiddenHolder').value = key;
  99. return true;
  100. }
  101. </script>
  102. <style>
  103. @import "../../dijit/themes/tundra/tundra.css";
  104. @import "../../dijit/themes/dijit.css";
  105. @import "../../dojo/resources/dojo.css";
  106. @import "../../dijit/tests/css/dijitTests.css";
  107. #limbo {
  108. display: none;
  109. }
  110. #theContainer {
  111. float:left;
  112. display: block; padding:12px; padding-top:0;
  113. width:420px; margin-left:20px;
  114. background-color:#fff; -moz-border-radius:8pt 8pt;
  115. border:2px solid #ededed;
  116. }
  117. #leftControl { float:left; width:300px; }
  118. #testControl, #submitControl { border:2px solid #ededed; padding:12px; -moz-border-radius:8pt 8pt; background-color:#fff; }
  119. #results { overflow:auto; height:300px; border:1px solid #ccc; color:darkred; padding:8px; }
  120. #results li { list-style-type: none; }
  121. #results ul { margin:0; padding:0; }
  122. .runHolder, .submitButton {
  123. border:1px solid #ccc; padding:3px; -moz-border-radius:8pt 8pt; text-align:center;
  124. cursor:pointer; background-color:#ededed; display:block; width:125px;
  125. }
  126. </style>
  127. </head>
  128. <body class="tundra">
  129. <div id="limbo"></div>
  130. <h1 class="testTitle">Dojo Benchmark Tool</h1>
  131. <div id="leftControl">
  132. <div id="testControl">
  133. Class: <input type="text" name="dijit" id="classNode" value="dijit.form.Button"><br><br>
  134. Count: <input type="text" name="count" id="countNode" value="100" size="4" ><br><br>
  135. Method: <label for="parse">
  136. <input type="radio" name="theMethod" value="parse" id="parse" checked="on"> Parse
  137. </label>
  138. <label for="create">
  139. <input type="radio" name="theMethod" value="create" id="create"> Create
  140. </label>
  141. <br><br>
  142. <span onclick="runTest()" class="runHolder"><span id="runner"> Run Test </span></span>
  143. </div>
  144. <br>
  145. <div id="submitControl">
  146. <p>
  147. * The results of these tests are important to us. Please feel free to submit your dataSet
  148. to Dojotoolkit.org. Your privacy will be respected.
  149. </p>
  150. <div id="hiddenResults">
  151. <form id="resultForm" action="http://dojo.inpdx.net/benchResults.php"
  152. method="POST" onsubmit="doDebug()">
  153. <input type="hidden" id="hiddenHolder" value="" name="key">
  154. <input type="submit" value=" Submit Data " class="submitButton">
  155. </form>
  156. </div>
  157. </div>
  158. </div>
  159. <div id="theContainer"><h3>Results:</h3><div id="results"></div></div>
  160. </body>
  161. </html>