Ruby on Rails | Screencasts | Download | Documentation | Weblog | Community | Source

Ticket #10907: element_match_benchmarks.html

File element_match_benchmarks.html, 14.0 kB (added by metavida, 2 years ago)

Some benchmarks (goes into test/unit)

Line 
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
4  xmlns:html="http://www.w3.org/1999/xhtml">
5 <head>
6   <title>Prototype Unit test file</title>
7   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
8   <script src="../../dist/prototype.js" type="text/javascript"></script>
9   <script src="../lib/unittest.js" type="text/javascript"></script>
10   <link rel="stylesheet" href="../test.css" type="text/css" />
11   <style type="text/css" media="screen">
12   /* <![CDATA[ */
13     #testcss1 { font-size:11px; color: #f00; }
14     #testcss2 { font-size:12px; color: #0f0; display: none; }
15   /* ]]> */
16   </style>
17 </head>
18 <body>
19 <h1>Prototype Unit test file</h1>
20 <p>
21   Test of utility functions in selector.js
22 </p>
23
24 <div id="fixtures" style="display: none">
25   <h1 class="title">Some title <span>here</span></h1>
26   <p id="p" class="first summary">
27     <strong id="strong">This</strong> is a short blurb
28     <a id="link_1" class="first internal" rel="external nofollow" href="#">with a <em id="em2">link</em></a> or
29     <a id="link_2" class="internal highlight" href="#"><em id="em">two</em></a>.
30     Or <cite id="with_title" title="hello world!">a citation</cite>.
31   </p>
32   <ul id="list">
33     <li id="item_1" class="first"><a id="link_3" href="#" class="external"><span id="span">Another link</span></a></li>
34     <li id="item_2">Some text</li>
35     <li id="item_3" xml:lang="es-us" class="">Otra cosa</li>
36   </ul>
37
38   <!-- this form has a field with the name 'id',
39     therefore its ID property won't be 'troubleForm': -->
40   <form id="troubleForm">
41     <input type="hidden" name="id" id="hidden" />
42     <input type="text" name="disabled_text_field" id="disabled_text_field" disabled="disabled" />
43     <input type="text" name="enabled_text_field" id="enabled_text_field" />
44     <input type="checkbox" name="checkboxes" id="checked_box" checked="checked" value="Checked" />
45     <input type="checkbox" name="checkboxes" id="unchecked_box" value="Unchecked"/>
46     <input type="radio" name="radiobuttons" id="checked_radio" checked="checked" value="Checked" />
47     <input type="radio" name="radiobuttons" id="unchecked_radio" value="Unchecked" />
48   </form>
49  
50   <form id="troubleForm2">
51     <input type="checkbox" name="brackets[5][]" id="chk_1" checked="checked" value="1" />
52     <input type="checkbox" name="brackets[5][]" id="chk_2" value="2" />   
53   </form>
54  
55   <div id="level1">
56     <span id="level2_1">
57       <span id="level3_1"></span>
58       <!-- This comment should be ignored by the adjacent selector -->
59       <span id="level3_2"></span>
60     </span>
61     <span id="level2_2">
62       <em id="level_only_child">   
63       </em>
64     </span>
65     <div id="level2_3"></div>
66   </div> <!-- #level1 -->
67
68   <div id="dupContainer">
69     <span id="dupL1" class="span_foo span_bar">
70       <span id="dupL2">
71         <span id="dupL3">
72           <span id="dupL4">
73             <span id="dupL5"></span>
74           </span>
75         </span>
76       </span>
77     </span>
78   </div> <!-- #dupContainer -->
79
80   <div id="grandfather"> grandfather   
81     <div id="father" class="brothers men"> father     
82       <div id="son"> son </div>
83     </div>
84     <div id="uncle" class="brothers men"> uncle </div>
85   </div> 
86
87   <form id="commaParent" title="commas,are,good">
88     <input type="hidden" id="commaChild" name="foo" value="#commaOne,#commaTwo" />
89     <input type="hidden" id="commaTwo" name="foo2" value="oops" />
90   </form>
91   <div id="counted_container"><div class="is_counted"></div></div>
92 </div> <!-- #fixtures -->
93
94 <!-- Log output -->
95 <div id="testlog"> </div>
96
97 <!-- Tests follow -->
98 <script type="text/javascript" language="javascript" charset="utf-8">
99 // <![CDATA[
100   var iterations = 50,
101       span,
102       p,
103       link,
104       item;
105  
106   function metavida_match(element, selector) {
107     var args = $A(arguments), element = $(args.shift()), selectors = [];
108     args.each(function(selector) {
109       if (Object.isString(selector)) { selectors = selectors.concat(selector.split(',')); }
110       else { selectors.push(selector); }
111     });
112     return !Object.isUndefined(selectors.detect(function(selector) {
113       if (Object.isString(selector))
114         selector = new Selector(selector);
115       return selector.match($(element));
116     }));
117   };
118  
119   function kangax_match(element, selector) {
120     if (!(element = $(element))) return;
121     return Object.isString(selector)
122       ? !!Selector.matchElements([element], selector).length
123       : selector.match(element);
124   };
125
126   new Test.Unit.Runner({
127     setup: function() {
128       span = $('dupL1');
129       p = $('p');
130       link = $('link_1');
131       item = $('item_1');
132      
133       to_extend = [span, p, link, item];
134     },
135    
136     testBenchmarkMatchSingleSelectorOriginal: function() {with(this) {
137       benchmark(function() {
138         assert(span.match('span'));
139         assert(span.match('span#dupL1'));
140         assert(span.match('div > span'), 'child combinator');
141         assert(span.match('#dupContainer span'), 'descendant combinator');     
142         assert(span.match('#dupL1'), 'ID only');
143         assert(span.match('span.span_foo'), 'class name 1');
144         assert(span.match('span.span_bar'), 'class name 2');
145         assert(span.match('span:first-child'), 'first-child pseudoclass');
146
147         assert(!span.match('span.span_wtf'), 'bogus class name');
148         assert(!span.match('#dupL2'), 'different ID');
149         assert(!span.match('div'), 'different tag name');
150         assert(!span.match('span span'), 'different ancestry');
151         assert(!span.match('span > span'), 'different parent');
152         assert(!span.match('span:nth-child(5)'), 'different pseudoclass');
153       }, iterations);
154     }},
155    
156     testBenchmarkMatchSingleSelectorMetavida: function() {with(this) {
157       to_extend.each(function(el) {
158         el.match = metavida_match.curry(el);
159       });
160      
161       benchmark(function() {
162         assert(span.match('span'));
163         assert(span.match('span#dupL1'));
164         assert(span.match('div > span'), 'child combinator');
165         assert(span.match('#dupContainer span'), 'descendant combinator');     
166         assert(span.match('#dupL1'), 'ID only');
167         assert(span.match('span.span_foo'), 'class name 1');
168         assert(span.match('span.span_bar'), 'class name 2');
169         assert(span.match('span:first-child'), 'first-child pseudoclass');
170
171         assert(!span.match('span.span_wtf'), 'bogus class name');
172         assert(!span.match('#dupL2'), 'different ID');
173         assert(!span.match('div'), 'different tag name');
174         assert(!span.match('span span'), 'different ancestry');
175         assert(!span.match('span > span'), 'different parent');
176         assert(!span.match('span:nth-child(5)'), 'different pseudoclass');
177       }, iterations);
178     }},
179    
180     testBenchmarkMatchSingleSelectorKangax: function() {with(this) {
181       to_extend.each(function(el) {
182         el.match = kangax_match.curry(el);
183       });
184      
185       benchmark(function() {
186         assert(span.match('span'));
187         assert(span.match('span#dupL1'));
188         assert(span.match('div > span'), 'child combinator');
189         assert(span.match('#dupContainer span'), 'descendant combinator');     
190         assert(span.match('#dupL1'), 'ID only');
191         assert(span.match('span.span_foo'), 'class name 1');
192         assert(span.match('span.span_bar'), 'class name 2');
193         assert(span.match('span:first-child'), 'first-child pseudoclass');
194
195         assert(!span.match('span.span_wtf'), 'bogus class name');
196         assert(!span.match('#dupL2'), 'different ID');
197         assert(!span.match('div'), 'different tag name');
198         assert(!span.match('span span'), 'different ancestry');
199         assert(!span.match('span > span'), 'different parent');
200         assert(!span.match('span:nth-child(5)'), 'different pseudoclass');
201       }, iterations);
202     }},
203    
204     testBenchmarkMatchCustomOriginal: function() {with(this) {
205       benchmark(function() {
206         assert(span.match({ match: function(element) { return true }}), 'custom selector');
207         assert(!span.match({ match: function(element) { return false }}), 'custom selector');
208       }, iterations*3);
209     }},
210    
211     testBenchmarkMatchCustomMetavida: function() {with(this) {
212       to_extend.each(function(el) {
213         el.match = metavida_match.curry(el);
214       });
215      
216       benchmark(function() {
217         assert(span.match({ match: function(element) { return true }}), 'custom selector');
218         assert(!span.match({ match: function(element) { return false }}), 'custom selector');
219       }, iterations*3);
220     }},
221    
222     testBenchmarkMatchCustomKangax: function() {with(this) {
223       to_extend.each(function(el) {
224         el.match = kangax_match.curry(el);
225       });
226      
227       benchmark(function() {
228         assert(span.match({ match: function(element) { return true }}), 'custom selector');
229         assert(!span.match({ match: function(element) { return false }}), 'custom selector');
230       }, iterations*3);
231     }},
232    
233     testBenchmarkMatchMultipleFirstMetavida: function() {with(this) {
234       to_extend.each(function(el) {
235         el.match = metavida_match.curry(el);
236       });
237      
238       benchmark(function() {
239         assert(span.match('span, a'));
240         assert(span.match('span#dupL1, a'));
241         assert(span.match('div > span, a'), 'child combinator');
242         assert(span.match('#dupContainer span, a'), 'descendant combinator');     
243         assert(span.match('#dupL1, a'), 'ID only');
244         assert(span.match('span[id=dupL1], a'), 'simple attribute');
245         assert(span.match('span[id="dupL1"], a'), 'attribute with double quotes');
246         assert(span.match("span[id='dupL1'], a"), 'attribute with single quotes');
247         assert(span.match('span.span_foo, a'), 'class name 1');
248         assert(span.match('span.span_bar, a'), 'class name 2');
249         assert(span.match('span:first-child, a'), 'first-child pseudoclass');
250
251         assert(!p.match('li.first, a.first'));
252         assert(link.match('li.first, a.first'));
253         assert(item.match('li.first, a.first'));
254       }, iterations);
255     }},
256    
257     testBenchmarkMatchMultipleFirstKangax: function() {with(this) {
258       to_extend.each(function(el) {
259         el.match = kangax_match.curry(el);
260       });
261      
262       benchmark(function() {
263         assert(span.match('span, a'));
264         assert(span.match('span#dupL1, a'));
265         assert(span.match('div > span, a'), 'child combinator');
266         assert(span.match('#dupContainer span, a'), 'descendant combinator');     
267         assert(span.match('#dupL1, a'), 'ID only');
268         assert(span.match('span[id=dupL1], a'), 'simple attribute');
269         assert(span.match('span[id="dupL1"], a'), 'attribute with double quotes');
270         assert(span.match("span[id='dupL1'], a"), 'attribute with single quotes');
271         assert(span.match('span.span_foo, a'), 'class name 1');
272         assert(span.match('span.span_bar, a'), 'class name 2');
273         assert(span.match('span:first-child, a'), 'first-child pseudoclass');
274
275         assert(!p.match('li.first, a.first'));
276         assert(link.match('li.first, a.first'));
277         assert(item.match('li.first, a.first'));
278       }, iterations);
279     }},
280    
281     testBenchmarkMatchMultipleSecondMetavida: function() {with(this) {
282       to_extend.each(function(el) {
283         el.match = metavida_match.curry(el);
284       });
285      
286       benchmark(function() {
287         assert(span.match('a, span'));
288         assert(span.match('a, span#dupL1'));
289         assert(span.match('a, div > span'), 'child combinator');
290         assert(span.match('a, #dupContainer span'), 'descendant combinator');     
291         assert(span.match('a, #dupL1'), 'ID only');
292         assert(span.match('a, span[id=dupL1]'), 'simple attribute');
293         assert(span.match('a, span[id="dupL1"]'), 'attribute with double quotes');
294         assert(span.match("a, span[id='dupL1']"), 'attribute with single quotes');
295         assert(span.match('a, span.span_foo'), 'class name 1');
296         assert(span.match('a, span.span_bar'), 'class name 2');
297         assert(span.match('a, span:first-child'), 'first-child pseudoclass');
298
299         assert(!span.match('a, span.span_wtf'), 'bogus class name');
300         assert(!span.match('a, #dupL2'), 'different ID');
301         assert(!span.match('a, div'), 'different tag name');
302         assert(!span.match('a, span span'), 'different ancestry');
303         assert(!span.match('a, span > span'), 'different parent');
304         assert(!span.match('a, span:nth-child(5)'), 'different pseudoclass');
305
306         assert(!p.match('li.first, a.first'));
307         assert(link.match('li.first, a.first'));
308         assert(item.match('li.first, a.first'));
309       }, iterations);
310     }},
311    
312     testBenchmarkMatchMultipleSecondKangax: function() {with(this) {
313       to_extend.each(function(el) {
314         el.match = kangax_match.curry(el);
315       });
316      
317       benchmark(function() {
318         assert(span.match('a, span'));
319         assert(span.match('a, span#dupL1'));
320         assert(span.match('a, div > span'), 'child combinator');
321         assert(span.match('a, #dupContainer span'), 'descendant combinator');     
322         assert(span.match('a, #dupL1'), 'ID only');
323         assert(span.match('a, span[id=dupL1]'), 'simple attribute');
324         assert(span.match('a, span[id="dupL1"]'), 'attribute with double quotes');
325         assert(span.match("a, span[id='dupL1']"), 'attribute with single quotes');
326         assert(span.match('a, span.span_foo'), 'class name 1');
327         assert(span.match('a, span.span_bar'), 'class name 2');
328         assert(span.match('a, span:first-child'), 'first-child pseudoclass');
329
330         assert(!span.match('a, span.span_wtf'), 'bogus class name');
331         assert(!span.match('a, #dupL2'), 'different ID');
332         assert(!span.match('a, div'), 'different tag name');
333         assert(!span.match('a, span span'), 'different ancestry');
334         assert(!span.match('a, span > span'), 'different parent');
335         assert(!span.match('a, span:nth-child(5)'), 'different pseudoclass');
336        
337         assert(!p.match('li.first, a.first'));
338         assert(link.match('li.first, a.first'));
339         assert(item.match('li.first, a.first'));
340       }, iterations);
341     }},
342   });
343  
344 // ]]>
345 </script>
346 </body>
347 </html>