root / trunk / bench / selector_test.php

Revision 7181, 18.2 kB (checked in by alex, 22 months ago)

selector speed tests. Fixes #2402

Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2        "http://www.w3.org/TR/html4/strict.dtd">
3
4<html>
5    <head>
6        <title>test of various synchronous page searching methods</title>
7        <style type="text/css">
8            body {
9                font-family: Lucida Grande, Verdana, Helvetica, Arial, sans-serif;
10                font-size:    12px;
11                letter-spacing:    0.045em;
12                line-height:    1.55em;
13            }
14        </style>
15        <script type="text/javascript">
16            djConfig = {
17                // turn of page parsing from the widget system to keep nodes "cold"
18                parseWidgets: false,
19                allowQueryConfig: true,
20                isDebug: true
21            };
22        </script>
23<?
24    $leadingChaff = 50;
25    $trailingChaff = 50;
26    $maxIter = 50; // 150;
27    $minIter = 10; // 10;
28?>
29        <!-- yui prereq -->
30        <!-- why does Jack have to make it such a PITA to get his code? -->
31        <script type="text/javascript" src="query_lib/jquery.js"></script>
32        <script type="text/javascript" src="query_lib/yui.js"></script>
33        <script type="text/javascript" src="query_lib/yui-ext.js"></script>
34        <script type="text/javascript" src="../dojo.js"></script>
35        <!--
36        <script type="text/javascript" src="query.js"></script>
37        -->
38        <script>
39            dojo.require("dojo.query");
40            dojo.require("dojo.lang.array");
41            dojo.require("dojo.lang.func");
42            dojo.require("dojo.Deferred");
43            dojo.require("dojo.widget.FilteringTable");
44            dojo.require("dojo.widget.ProgressBar");
45            dojo.require("dojo.lfx.extras");
46            dojo.require("dojo.debug.console");
47        </script>
48        <script type="text/javascript">
49            dojo.addOnLoad(function(){
50                dojo.debug("wildcard dojo-* is rational: ",
51                    dojo.query('.dojo-*').length ==
52                    <?= ($leadingChaff+$trailingChaff) ?>);
53
54                // from Jack Slockum's DomQuery test suite
55                var tests = [
56                    { selector: 'div span span',
57                        correct: 55, iter: <?=$maxIter?>, step: 25 },
58
59                    { selector: 'span span div',
60                        correct: 6, iter: <?=$maxIter?>, step: 25 },
61
62                    { selector: '#test-data2 span span div',
63                        correct: 6, iter: <?=$maxIter?>, step: 25 },
64
65                    { selector: 'h4',
66                        correct: <?= ($leadingChaff+$trailingChaff)*3 ?>,
67                        iter: <?=$minIter?>, step: 25 },
68
69                    { selector: 'h4.thinger',
70                        correct: <?= ($leadingChaff+$trailingChaff) ?>,
71                        iter: <?=$minIter?>, step: 25 },
72
73                    { selector: '.thinger',
74                        correct: <?= ($leadingChaff+$trailingChaff) ?>,
75                        iter: <?=$minIter?>, step: 25 },
76
77                    { selector: '.thinger2',
78                        correct: <?= ($leadingChaff+$trailingChaff) ?>,
79                        iter: <?=$minIter?>, step: 25 },
80
81                    { selector: '#test-data',
82                        correct: 1, iter: <?=$maxIter?>, step: 25 },
83
84                    { selector: 'div#test-data',
85                        correct: 1, iter: <?=$maxIter?>, step: 25 },
86
87                    { selector: 'span#test-data',
88                        correct: 0, iter: <?=$maxIter?>, step: 25 },
89
90                    { selector: '#test-data span',
91                         correct: 149, iter: <?=$maxIter?>, step: 10 },
92
93                    { selector: '#test-data pre code',
94                        correct: 2, iter: <?=$maxIter?>, step: 25 },
95
96                    { selector: '#test-data pre > code',
97                        correct: 1, iter: <?=$minIter?>, step: 25 },
98
99                    { selector: '#test-data pre code span',
100                        correct: 148, iter: <?=$minIter?>, step: 10 },
101
102                    { selector: '#test-data pre > code > span',
103                        correct: 98, iter: <?=$minIter?>, step: 5 },
104
105                    { selector: '#test-data span.hl-code',
106                        correct: 46, iter: <?=$maxIter?>, step: 5 },
107
108                    { selector: '#test-data pre.highlighted > code',
109                        correct: 1, iter: <?=$maxIter?>, step: 10 },
110
111                    { selector: '#test-data span:first-child',
112                        correct: 3, iter: <?=$maxIter?>, step: 3 },
113
114                    { selector: '#test-data span:last-child',
115                        correct: 3, iter: <?=$maxIter?>, step: 3 },
116
117                    { selector: '#test-data span:empty',
118                        correct: 1, iter: <?=$maxIter?>, step: 3 },
119
120                    { selector: '#test-data span:first',
121                        correct: 1, iter: <?=$maxIter?>, step: 25 },
122
123                    { selector: '#test-data span:last',
124                        correct: 1, iter: <?=$maxIter?>, step: 25 },
125
126                    { selector: '#test-data span.hl-code, #test-data span.hl-brackets',
127                        correct: 61, iter: <?=$maxIter?>, step: 3 },
128
129                    { selector: '#test-data span:nth-child(2)',
130                        correct:2, iter: <?=$maxIter?>, step: 2 },
131
132                    { selector: '#test-data span:nth-child(3)',
133                        correct:2, iter: <?=$maxIter?>, step: 10 },
134
135                    { selector: '#test-data span:nth-child(0n+3)',
136                        correct:2, iter: <?=$maxIter?>, step: 10 },
137
138                    { selector: '#test-data span:nth-child(even)',
139                        correct: 74, iter: <?=$minIter?>, step: 10 },
140
141                    { selector: '#test-data span:nth-child(2n)',
142                        correct:74, iter: <?=$minIter?>, step: 1 } ,
143
144                    { selector: '#test-data span:nth-child(odd)',
145                        correct: 75, iter: <?=$minIter?>, step: 10 },
146
147                    { selector: '#test-data span:nth-child(2n+1)',
148                        correct:75, iter: <?=$minIter?>, step: 2 },
149
150                    { selector: '#test-data span:contains(new)',
151                        correct: 3, iter: <?=$maxIter?>, step: 3 },
152
153                    { selector: '#test-data span:not(span.hl-code)',
154                        correct: 103, iter: <?=$minIter?>, step: 2 },
155
156                    { selector: '#test-data :first-child',
157                        correct: 6, iter: <?=$maxIter?>, step: 3 },
158
159                    { selector: '#test-data span.hl-default',
160                        correct: 13, iter: <?=$maxIter?>, step: 3 },
161
162                    { selector: '#test-data span:not(:first-child)',
163                        correct: 146, iter: <?=$maxIter?>, step: 3 },
164
165
166                    { selector: "#test-data2 div:last-child",
167                        correct: 3, iter: <?=$maxIter?>, step: 3 },
168
169                    { selector: "#test-data2 code#inner1 code#inner2",
170                        correct: 1, iter: <?=$maxIter?>, step: 3 },
171
172                    { selector: '#test-data span.hl-default:not(:first-child)',
173                        correct: 13, iter: <?=$maxIter?>, step: 3 } ,
174
175                    { selector: '#test-data span[title]',
176                        correct: 11, iter: <?=$maxIter?>, step: 3 },
177
178                    { selector: '#test-data span[title=east]',
179                        correct: 4, iter: <?=$maxIter?>, step: 3 },
180
181                    { selector: '#test-data span[title="east"]',
182                        correct: 4, iter: <?=$maxIter?>, step: 3 },
183
184                    // both other systems support the @ syntax
185                    { selector: '#test-data span[@title="east"]',
186                        correct: 4, iter: <?=$maxIter?>, step: 3 },
187
188                    { selector: '#test-data span[title!=east]',
189                        correct: 145, iter: <?=$maxIter?>, step: 3 },
190
191                    { selector: '#test-data span[title^=min]',
192                        correct:2, iter: <?=$maxIter?>, step: 3 },
193
194                    { selector: '#test-data span[title$=er]',
195                        correct:2, iter: <?=$maxIter?>, step: 3 },
196
197                    { selector: '#test-data span[title*=in]',
198                        correct:2, iter: <?=$maxIter?>, step: 3 } //,
199
200                    /*
201                    { selector: '#test-data/pre/code/span',
202                        correct: 147, iter: <?=$maxIter?>, step: 3 },
203
204                    { selector: '#test-data/pre[@class=highlighted]/code',
205                        correct:2, iter: <?=$maxIter?>, step: 3 }
206                    */
207                ];
208
209                var table = dojo.widget.createWidget("FilteringTable",
210                                                    {
211                                                        widgetId: "profileOutputTable",
212                                                        multiple: false,
213                                                        maxSortable: 1,
214                                                        maxSelect: 0
215                                                    },
216                                                    dojo.byId("profileOutputTable"));
217
218                var progress = dojo.widget.createWidget("ProgressBar", {},
219                                                    dojo.byId("progress"));
220                var testFuncArr = [];
221                var rowSet = {};
222
223                var check = function(name, test, matches, dname){
224                    if(matches.length != test.correct){
225                        var row = rowSet[test.selector];
226                        row[dname] = "<i style='color: red; text-decoration: line-through;'>"+row[dname]+"</i>";
227                        dojo.debug("BROKEN:", name, ":", test.selector),
228                        dojo.debug("expected:", test.correct, "got:", matches.length);
229                        /*
230                        */
231                    }
232                };
233
234                /*
235                var showWinners = function(){
236                    // highlight the winners, giving folks a "draw"
237                    for(var x in rowSet){
238                        test = rowSet[x];
239                        dojo.debug(test.dojo, test.yui_ext, test.jquery);
240                        // rowSet[test.selector];
241                    }
242                }
243                */
244
245                var runners = [
246                    [ "jQuery", "jquery", jQuery, "find" ],
247                    [ "YUI.ext", "yui_ext", Ext.DomQuery, "select" ],
248                    [ "Dojo", "dojo", dojo, "query" ]
249                ];
250
251                var idx = 0;
252
253                var runIter = 0;
254                var nextTick = function(){
255                    progress.setProgressValue(runIter++);
256                }
257
258                dojo.lang.forEach(tests, function(test){
259                    var s = new String(test.selector);
260                    var tdata = {
261                        selector: s,
262                        iter: test.iter,
263                        dojo: 0,
264                        yui_ext: 0,
265                        jquery: 0,
266                        idx: ++idx
267                    };
268                    rowSet[s] = tdata;
269                    table.store.addData(tdata, s);
270
271                    testFuncArr.push(function(){                   
272                        dojo.lang.forEach(runners, function(r){
273                            table.store.update(tdata, r[1], "...");
274                            tdata[r[1]] = 0;
275                        });
276                    });
277                });
278
279                dojo.lang.forEach(runners, function(r){
280                    dojo.lang.forEach(tests, function(test){
281                        // the final "toString()" here is to pacify jQuery.
282                        // It's got some b0rken type detection code in its
283                        // find() method.
284                        var s = new String(test.selector).toString();
285                        var tdata = rowSet[s];
286                        var major = parseInt(test.iter/test.step);
287                        var minor = test.iter % test.step;
288
289                        for(var i=0; i<major; i++){
290                            testFuncArr.push(function(){                   
291                                for(var x=0; x<test.step; x++){
292                                    var tic = new Date();
293                                    r[2][r[3]](s);
294                                    tdata[r[1]] += (new Date())-tic;
295                                }
296                            });
297                        }
298                        if(0 < minor){
299                            testFuncArr.push(function(){                   
300                                for(var x=0; x<minor; x++){
301                                    var tic = new Date();
302                                    r[2][r[3]](s);
303                                    tdata[r[1]] += (new Date())-tic;
304                                }
305                            });
306                        }
307                        testFuncArr.push(function(){                   
308                            check(r[0], test, r[2][r[3]](s), r[1]);
309                            table.store.update(tdata, r[1], tdata[r[1]]);
310                        });
311                    });
312                });
313                progress.setMaxProgressValue(testFuncArr.length-1);
314
315                var onEnd = function(){
316                    dojo.lfx.fadeWipeOut(progress.domNode).play(100);
317                }
318                dojo.lang.delayThese(testFuncArr, nextTick, 10, onEnd);
319            });
320        </script>
321    </head>
322    <body>
323        <div id="progress"></div>
324        <h5>
325            <!-- span is to test selector correctness -->
326            <span>
327                Note: times are aggregate across test runs for at toolkit and
328                listed in milliseconds.
329            </span>
330        </h5>
331        <button onclick="dojo.debug(dojo.widget.byId('profileOutputTable').domNode.parentNode.innerHTML);">dump results</button>
332        <div>
333            <table id="profileOutputTable" widgetId="profileOutputTable"
334                cellpadding="2" cellspacing="0" border="0" style="margin-bottom:24px;">
335                <thead>
336                    <tr>
337                        <th field="idx" dataType="Number" sort="asc" align="right">#</th>
338                        <th field="selector" dataType="String" style="text-align: left;">Test</th>
339                        <th field="iter" dataType="Number" align="right">Iterations</th>
340                        <th field="dojo" dataType="html" align="right">Dojo</th>
341                        <th field="yui_ext" dataType="html" align="right">YUI.ext</th>
342                        <th field="jquery" dataType="html" align="right">JQuery 1.1</th>
343                    </tr>
344                </thead>
345                <tbody>
346                   
347                </tbody>
348            </table>
349        </div>
350        <div id="dojoDebug"></div>
351<?
352    function generateChaff($iters){
353        for($i=0;$i<$iters;$i++){ ?>
354            <h4 class="thinger dojo-Thinger">The standard Lorem Ipsum passage, used since the 1500s</h4>
355            <p>
356            "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
357            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
358            ad minim veniam, ..
359            </p>
360
361            <h4>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</h4>
362
363            <p class="blah thinger2 blahblah">
364            "Sed ut perspiciatis unde omnis iste natus error sit voluptatem
365            accusantium doloremque laudantium,...
366            </p>
367
368            <h4>1914 translation by H. Rackham</h4>
369
370            <!-- <pre></pre> -->
371            <p>
372            "But I must explain to you how all this mistaken idea of denouncing
373            pleasure and praising pain was born and I will give you a complete
374            account of the system, ...
375            <p>
376        <? }
377    } // end generateChaff
378    // $widgetName = "dojo-TundraButton";
379?>
380    <div id="test-data" style="position: absolute; width: 1px; height: 1px; top: 0px; left: 0px; overflow: hidden;">
381<? generateChaff($leadingChaff); ?>
382            <pre class=" highlighted"><code><span><!-- it's empty! --></span><span class="hl-reserved">var </span><span class="hl-identifier">dlg</span><span class="hl-default"> = </span><span class="hl-reserved">new </span><span class="hl-identifier">blah</span><span class="hl-default">.</span><span class="hl-identifier">ext</span><span class="hl-default">.</span><span class="hl-identifier">LayoutDialog</span><span class="hl-brackets">(</span><span class="hl-identifier">config</span><span class="hl-code">.</span><span class="hl-identifier">id</span><span class="hl-code"> || </span><span class="hl-identifier">blah</span><span class="hl-code">.</span><span class="hl-identifier">util</span><span class="hl-code">.</span><span class="hl-identifier">Dom</span><span class="hl-code">.</span><span class="hl-identifier">generateId</span><span class="hl-brackets">()</span><span class="hl-code">, </span><span class="hl-brackets">{
383                </span><span title="autoCreate" class="hl-identifier">autoCreate</span><span class="hl-code"> : </span><span class="hl-reserved">true</span><span class="hl-code">,
384                </span><span title="minWidth" class="hl-identifier">minWidth</span><span class="hl-code">:</span><span class="hl-number">400</span><span class="hl-code">,
385                </span><span title="minHeight" class="hl-identifier">minHeight</span><span class="hl-code">:</span><span class="hl-number">300</span><span class="hl-code">,
386                </span>
387                <span title="syncHeightBeforeShow" class="hl-identifier">syncHeightBeforeShow</span><span class="hl-code">: </span><span class="hl-reserved">true</span><span class="hl-code">,
388                </span><span title="shadow" class="hl-identifier">shadow</span><span class="hl-code">:</span><span class="hl-reserved">true</span><span class="hl-code">,
389                </span><span title="fixedcenter" class="hl-identifier">fixedcenter</span><span class="hl-code">: </span><span class="hl-reserved">true</span><span class="hl-code">,
390                </span><span title="center" class="hl-identifier">center</span><span class="hl-code">:</span><span class="hl-brackets">{</span><span class="hl-identifier">autoScroll</span><span class="hl-code">:</span><span class="hl-reserved">false</span><span class="hl-brackets">}</span><span class="hl-code">,
391                </span><span title="east"  class="hl-identifier">east</span><span class="hl-code">:</span><span class="hl-brackets">{</span><span class="hl-identifier">split</span><span class="hl-code">:</span><span class="hl-reserved">true</span><span class="hl-code">,</span><span class="hl-identifier">initialSize</span><span class="hl-code">:</span><span class="hl-number">150</span><span class="hl-code">,</span><span class="hl-identifier">minSize</span><span class="hl-code">:</span><span class="hl-number">150</span><span class="hl-code">,</span><span class="hl-identifier">maxSize</span><span class="hl-code">:</span><span class="hl-number">250</span><span class="hl-brackets">}
392            })</span><span class="hl-default">;
393            </span><span class="hl-identifier">dlg</span><span class="hl-default">.</span><span class="hl-identifier">setTitle</span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">Choose an Image</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-default">;
394            </span><span class="hl-identifier">dlg</span><span class="hl-default">.</span><span class="hl-identifier">getEl</span><span class="hl-brackets">()</span><span class="hl-default" id="fooblah">.</span><span class="hl-identifier">addClass</span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">ychooser-dlg</span><span class="hl-quotes">'</span><span class="hl-brackets">)</span><span class="hl-default">;</span></code></pre><br />
395            <pre class="highlighted"><span><code><span class="hl-reserved">var </span><span class="hl-identifier">animated</span><span class="hl-default"> = </span><span class="hl-reserved">new </span><span class="hl-identifier">blah</span><span class="hl-default">.</span><span class="hl-identifier">ext</span><span class="hl-default">.</span><span class="hl-identifier">Resizable</span><span class="hl-brackets">(</span><span class="hl-quotes">'</span><span class="hl-string">animated</span><span class="hl-quotes">'</span><span class="hl-code">, </span><span class="hl-brackets">{
396                </span><span title="east" class="hl-identifier">width</span><span class="hl-code">: </span><span class="hl-number">200</span><span class="hl-code">,
397                </span><span title="east" class="hl-identifier">height</span><span class="hl-code">: </span><span class="hl-number">100</span><span class="hl-code">,
398                </span><span title="east" class="hl-identifier">minWidth</span><span class="hl-code">:</span><span class="hl-number">100</span><span class="hl-code">,
399                </span><span class="hl-identifier">minHeight</span><span class="hl-code">:</span><span class="hl-number">50</span><span class="hl-code">,
400                </span><span class="hl-identifier">animate</span><span class="hl-code">:</span><span class="hl-reserved">true</span><span class="hl-code">,
401                </span><span class="hl-identifier">easing</span><span class="hl-code">: </span><span class="hl-identifier">YAHOO</span><span class="hl-code">.</span><span class="hl-identifier">util</span><span class="hl-code">.</span><span class="hl-identifier">Easing</span><span class="hl-code">.</span><span class="hl-identifier">backIn</span><span class="hl-code">,
402                </span><span class="hl-identifier">duration</span><span class="hl-code">:</span><span class="hl-number">.6
403            </span><span class="hl-brackets">})</span><span class="hl-default">;</span></code></span></pre>
404<? generateChaff($trailingChaff);  ?>
405    </div>
406    <div id="test-data2">
407        <span>
408            <span>
409                <div></div>
410                <div></div>
411                <div>
412                    <span>
413                        <span>
414                            <div></div>
415                            <div>
416                            <span>
417                                <span>
418                                    <code id="inner1"><code id="inner2"></code></code>
419                                    <div></div>
420                                </span>
421                            </span>
422                        </span>
423                    </span>
424                </div>
425            </span>
426        </span>
427    </div>
428    <!-- from jQuery's test page -->
429    <!--
430    <div class="dialog scene" id="scene1">
431        <h3>ACT I, SCENE III. A room in the palace.</h3>
432        <div class="dialog">
433            <div class="direction">Enter CELIA and ROSALIND</div>
434        </div>
435
436        <div id="speech1" class="character">CELIA</div>
437
438        <div class="dialog">
439            <div id="scene1.3.1">Why, cousin! why, Rosalind! Cupid have mercy! not a word?</div>
440        </div>
441
442        <div id="speech2" class="character">ROSALIND</div>
443
444        <div class="dialog">
445            <div id="scene1.3.2">Not one to throw at a dog.</div>
446        </div>
447
448        <div id="speech3" class="character">CELIA</div>
449        <div class="dialog">
450            <div id="scene1.3.3">No, thy words are too precious to be cast away upon</div>
451        </div>
452    </div>
453    -->
454    </body>
455</html>
Note: See TracBrowser for help on using the browser.