source: Dev/trunk/src/client/dijit/bench/benchTool.html @ 532

Last change on this file since 532 was 483, checked in by hendrikvanantwerpen, 11 years ago

Added Dojo 1.9.3 release.
File size: 6.6 KB
Line 
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
7        <!-- make display better on mobile, so that results appear under the controls rather than to the right of them -->
8        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
9
10        <style>
11                @import "../../dijit/themes/claro/claro.css";
12                @import "../themes/claro/document.css";
13                @import "../../dijit/tests/css/dijitTests.css";
14
15                #resultsContainer, #testControl, #submitControl {
16                        margin: 20px;
17                        padding:12px;
18                        background-color:#fff;
19                        -moz-border-radius:8pt 8pt;
20                        -webkit-border-radius:7pt;
21                        border:2px solid #ededed;
22                }
23
24                #resultsContainer {
25                        padding-top: 0;
26                }
27
28                #results {  overflow:auto; min-height:100px; border:1px solid #ccc; color:darkred; padding:8px;  }
29
30                .runHolder, .submitButton {
31                        border:1px solid #ccc; padding:3px;
32                        -moz-border-radius:8pt 8pt;
33                        -webkit-border-radius:7pt;
34                        text-align:center;
35                        cursor:pointer; background-color:#ededed; display:block; width:125px;
36                }
37
38        </style>
39
40
41        <script type="text/javascript" src="../../dojo/dojo.js"></script>
42        <script type="text/javascript">
43                // basic stats are located at http://dante.dojotoolkit.org/benchmarks/
44
45                dojo.require("dojo.fx");
46                dojo.require("dijit.dijit");
47                dojo.require("dijit.form.ComboBox");
48                dojo.require("dojo.parser");
49
50                // setup global variables
51                var masterResults = { clientNavigator: navigator.userAgent, dataSet: [], errors: [] };
52                var isRunning = false;
53                var theCount, theClass, runner = null;
54                var testCount = 0;
55
56                dojo.ready(function(){
57                        theCount = dojo.byId('countNode');
58                        runner = dojo.byId('runner');
59                        masterResults.dojoVersion = dojo.version.toString();
60                       
61                        dojo.parser.parse();    // instantiate the ComboBox
62                        theClass = dijit.byId('classNode');
63                });
64
65
66                function _toggleRunMsg(){
67                        var newMsg = (isRunning) ? " Run Test " : " Running ...";
68                        dojo.fx.chain([
69                                dojo.fadeOut({
70                                        node:runner,
71                                        duration:200,
72                                        onEnd: function(){
73                                                runner.innerHTML = newMsg;
74                                                isRunning=!isRunning;
75                                        }
76                                }),
77                                dojo.fadeIn({ node:runner, duration: 200 })
78                        ]).play();
79                }
80
81                function runTest(){
82                        if(isRunning){ return; }
83                        _toggleRunMsg();
84                        setTimeout(function(){ _runRealTest(); },1000);
85                }
86
87                function _runRealTest(){
88
89                        // Remove widgets from previous run
90                        dojo.forEach(dijit.findWidgets(dojo.byId("widgetsContainer")), function(widget){
91                                widget.destroyRecursive();
92                        });
93
94                        var count = theCount.value,
95                                aclass = theClass.get("value"),
96                                theMethod = dojo.query("input[name=theMethod]").filter(function(node){ return node.checked; }).attr("value")[0],
97                                tmpNode = document.createElement('div'),
98                                startTimer;
99                        try{
100                                dojo.require(/dojox\.mobile\.[A-Z]/.test(aclass) ? "dojox.mobile._base" : aclass);
101                                dojo.ready(function(){
102                                        var i;
103                                        switch(theMethod){
104                                                case "parse" :
105                                                case "fastparse" :
106                                                        var tmpString = [];
107                                                        var tag = /Button/.test(aclass) ? "button" : (/Text/.test(aclass) ? "input" : "div");
108                                                        for(i=0; i<count; i++){
109                                                                tmpString.push(
110                                                                '<', tag, ' ',
111                                                                 (theMethod == 'fastparse' ? 'data-dojo-type="' : 'dojoType="'),
112                                                                aclass, '"></', tag, '>');
113                                                        }
114                                                        tmpNode.innerHTML = tmpString.join("");
115                                                        startTimer = new Date().getTime();
116                                                        dojo.parser.parse(tmpNode);
117                                                        break;
118                                                case "create" :
119                                                        var construction = dojo.getObject(aclass);
120                                                        startTimer = new Date().getTime();
121                                                        for(i=0; i<count; i++){
122                                                                var tmp = new construction({});
123                                                                tmpNode.appendChild(tmp.domNode);
124                                                        }
125                                                        break;
126                                        }
127
128                                        // Render the widgets in a visible <div> as part of benchmark
129                                        dojo.byId("widgetsContainer").appendChild(tmpNode);
130                                       
131                                        // [Some] browsers defer rendering until after JS finishes running
132                                        // so use a setTimeout(, 0) to make sure widgets render.
133                                        setTimeout(function(){
134                                                var endTime = new Date().getTime() - startTimer;
135       
136                                                var average = (endTime / count);
137                                                var msg = "It took: "+endTime+"ms to "+theMethod+" "+count+" "+aclass+" widgets"+
138                                                        "<br>(average: "+average+" ms/widget)<br><br>";
139       
140                                                masterResults.dataSet.push({
141                                                        testNum: ++testCount,
142                                                        dijit: aclass,
143                                                        testCount: count,
144                                                        testAverage: average,
145                                                        testMethod: theMethod,
146                                                        testTime: endTime
147                                                });
148
149                                                dojo.byId("results").innerHTML += msg;
150                                               
151                                                dojo.byId("mailto").href = "mailto:?subject=test results&body=" +
152                                                        encodeURIComponent(dojo.byId("results").innerText || dojo.byId("results").textContent);
153
154                                                setTimeout(function(){ _toggleRunMsg(); },250);
155                                        }, 0);
156
157                                });
158                        }catch(e){
159
160                                setTimeout(function(){ _toggleRunMsg(); },250);
161                                console.error("Ooops:", e);
162                        }
163
164                }
165
166                function doDebug(){
167                        dojo.byId('hiddenHolder').value = dojo.toJson(masterResults);
168                        return true;
169                }
170
171        </script>
172</head>
173<body class="claro">
174        <h1 class="testTitle">Dojo Benchmark Tool</h1>
175
176        <div id="testControl">
177
178                Class:
179                        <select data-dojo-type="dijit/form/ComboBox"
180                                        data-dojo-props='name:"dijit", id:"classNode", value:"dijit.form.Button", style:{width:"200px"}'>
181                                <option>dijit.form.Button</option>
182                                <option>dojox.mobile.Button</option>
183                                <option>dijit.form.TextBox</option>
184                                <option>dojox.mobile.app.TextBox</option>
185                        </select>
186                <br><br>
187                Count: <input type="text" name="count" id="countNode" value="100" size="4" ><br><br>
188
189                Method:
190                        <br>
191                        <label for="parse">
192                                <input type="radio" name="theMethod" value="parse" id="parse" checked="on"> Parse with 1.x dojoType syntax
193                        </label>
194                        <br>
195                        <label for="fastparse">
196                                <input type="radio" name="theMethod" value="fastparse" id="fastparse"> Parse with 2.0 data-dojo-type syntax
197                        </label>
198                        <br>
199                        <label for="create">
200                                <input type="radio" name="theMethod" value="create" id="create"> Create programatically
201                        </label>
202
203                <br><br>
204                <span onclick="runTest()" class="runHolder"><span id="runner"> Run Test </span></span>
205
206        </div>
207
208        <div id="resultsContainer"><h3>Results:</h3><div id="results"></div></div>
209
210        <div id="submitControl">
211                <p>
212                * The results of these tests are important to us.  Please feel free to submit your dataSet
213                to Dojotoolkit.org. Your privacy will be respected.
214                </p>
215                <div id="hiddenResults">
216                        <form id="resultForm" action="http://dante.dojotoolkit.org/benchmarks/submit.php"
217                                method="POST" onsubmit="doDebug()">
218                                <input type="hidden" id="hiddenHolder" value="" name="key">
219                                <input type="submit" value=" Submit Data " class="submitButton">
220                        </form>
221                </div>
222               
223                <p>Alternately, <a id="mailto">mail results</a> to any email address.</p>
224        </div>
225
226        <div id="widgetsContainer" style="clear: both;"></div>
227</body>
228</html>
Note: See TracBrowser for help on using the repository browser.