git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dijit/bench/benchTool.html

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