PerformanceTests/CSS/QuerySelector.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4     <title>Query selector benchmark.</title>
   5     <script src="../resources/runner.js"></script>
   6 </head>
   7 <body>
   8
   9 </body>
  10 <script>
  11
  12 var iframe = document.createElement("iframe");
  13 iframe.style.display = "none";
  14 document.body.appendChild(iframe);
  15
  16 function verifySizeExpectation(result, expectedSize)
  17 {
  18     if (result.length != expectedSize)
  19         throw "The query did not return the expected results."
  20 }
  21
  22 var test = {
  23     description: "This tests the performance of querySelector for a variety of common use cases.",
  24     setup: function() {
  25         // In order to restrict caching between operations, the tree is rebuilt from scratch.
  26         var spec = PerfTestRunner.loadFile("resources/query-selector.html");
  27         iframe.contentDocument.firstChild.innerHTML = spec;
  28     },
  29     run: function() {
  30         var iFrameDocument = iframe.contentDocument;
  31
  32         for (var repeat = 0; repeat < 5; ++repeat) {
  33             /// Various multiselector. About 15% of the queries.
  34             for (var i = 0; i < 150; ++i) {
  35                 // Complex descent.
  36                 var result = iFrameDocument.querySelectorAll("html body div>#complex-multi-rules1 .some-class li[data-bar].some-class");
  37                 verifySizeExpectation(result, 1);
  38
  39                 // id tag.
  40                 verifySizeExpectation(iFrameDocument.querySelectorAll("#complex-multi-rules2 acronym"), 1);
  41                 verifySizeExpectation(iFrameDocument.querySelectorAll("[id='complex-multi-rules2'] a"), 1);
  42
  43                 // Multiple id + selector, sharing the same id.
  44                 result = iFrameDocument.querySelectorAll("#complex-multi-rules3 source, #complex-multi-rules3 li, #complex-multi-rules3 td");
  45                 verifySizeExpectation(result, 11);
  46                 result = iFrameDocument.querySelectorAll("[id='complex-multi-rules3'] source, [id='complex-multi-rules3'] li, [id='complex-multi-rules3'] td");
  47                 verifySizeExpectation(result, 11);
  48                 result = iFrameDocument.querySelectorAll("#complex-multi-rules3 .some-class, #complex-multi-rules3 .other-class");
  49                 verifySizeExpectation(result, 7);
  50                 result = iFrameDocument.querySelectorAll("[id='complex-multi-rules3'] .some-class, [id='complex-multi-rules3'] li, [id='complex-multi-rules3'] .other-class");
  51                 verifySizeExpectation(result, 7);
  52
  53                 // Several Ids.
  54                 result = iFrameDocument.querySelectorAll("#complex-multi-rules4 #complex-multi-rules4-sub1 #complex-multi-rules4-sub2 #complex-multi-rules4-sub3");
  55                 verifySizeExpectation(result, 1);
  56                 result = iFrameDocument.querySelectorAll("#complex-multi-rules4 [id='complex-multi-rules4-sub1'] #complex-multi-rules4-sub2 [id='complex-multi-rules4-sub3']");
  57                 result = iFrameDocument.querySelectorAll("[id='complex-multi-rules4'] [id='complex-multi-rules4-sub1'] [id='complex-multi-rules4-sub2'] [id='complex-multi-rules4-sub3']");
  58                 verifySizeExpectation(result, 1);
  59
  60                 // Id sandwich: Multiple ids with selectors in between.
  61                 result = iFrameDocument.querySelectorAll("#complex-multi-rules5 div #complex-multi-rules5-left ul li.other-class #complex-multi-rules5-right table tr>td");
  62                 verifySizeExpectation(result, 2);
  63                 result = iFrameDocument.querySelectorAll("div#complex-multi-rules5>div div#complex-multi-rules5-left ul .other-class p img#complex-multi-rules5-image");
  64                 verifySizeExpectation(result, 1);
  65
  66                 // Named form attribute under hierarchy.
  67                 result = iFrameDocument.querySelectorAll("input[name='complex-multi-rules6-file-input']");
  68                 verifySizeExpectation(result, 1);
  69                 result = iFrameDocument.querySelectorAll("form input[name='complex-multi-rules6-file-input']");
  70                 verifySizeExpectation(result, 1);
  71                 result = iFrameDocument.querySelectorAll("form[name='complex-multi-rules6-form'] input[name='complex-multi-rules6-file-input']");
  72                 verifySizeExpectation(result, 1);
  73                 result = iFrameDocument.querySelectorAll("form[name='complex-multi-rules6-form'] div input[name='complex-multi-rules6-file-input']");
  74                 verifySizeExpectation(result, 1);
  75                 result = iFrameDocument.querySelectorAll("form[name='complex-multi-rules6-form'] div div input[name='complex-multi-rules6-file-input']");
  76                 verifySizeExpectation(result, 1);
  77                 result = iFrameDocument.querySelectorAll("form[name='complex-multi-rules6-form']>div>div>input[name='complex-multi-rules6-file-input']");
  78                 verifySizeExpectation(result, 1);
  79
  80                 // Hierarchy of tag and class.
  81                 result = iFrameDocument.querySelectorAll("div div a div div p.result-class");
  82                 verifySizeExpectation(result, 1);
  83                 result = iFrameDocument.querySelectorAll("div div.some-class a.other-class div.another-class div p.result-class");
  84                 verifySizeExpectation(result, 1);
  85                 result = iFrameDocument.querySelectorAll("div>div>a div div p.result-class");
  86                 verifySizeExpectation(result, 1);
  87                 result = iFrameDocument.querySelectorAll("div>div.some-class>a.other-class>div.another-class>div>p.result-class");
  88                 verifySizeExpectation(result, 1);
  89                 result = iFrameDocument.querySelectorAll("div div a div div p.result-class, div div.some-class a div div p.result-class, div div.some-class a.other-class div div p.result-class, div div.some-class a.other-class div.another-class div p.result-class");
  90                 verifySizeExpectation(result, 1);
  91             }
  92
  93             // tag.class. About 10% of the queries
  94             for (var i = 0; i < 100; ++i) {
  95                 result = iFrameDocument.querySelectorAll("details.details-class");
  96                 verifySizeExpectation(result, 1);
  97                 result = iFrameDocument.querySelectorAll("summary.summary-class");
  98                 verifySizeExpectation(result, 1);
  99                 result = iFrameDocument.querySelectorAll("article.article-class");
 100                 verifySizeExpectation(result, 1);
 101             }
 102
 103             // Single selector query, 75% of the queries. Split between:
 104             //    -tag
 105             //    -[attribute]
 106             //         -exist
 107             //         -value=something
 108             //    -#id
 109             //    -.class
 110             for (var i = 0; i < 750; ++i) {
 111                 // Tags.
 112                 result = iFrameDocument.querySelectorAll("details");
 113                 verifySizeExpectation(result, 1);
 114                 result = iFrameDocument.querySelectorAll("summary");
 115                 verifySizeExpectation(result, 1);
 116                 result = iFrameDocument.querySelectorAll("article");
 117                 verifySizeExpectation(result, 1);
 118                 result = iFrameDocument.querySelectorAll("head");
 119                 verifySizeExpectation(result, 1);
 120                 result = iFrameDocument.querySelectorAll("body");
 121                 verifySizeExpectation(result, 1);
 122                 result = iFrameDocument.querySelectorAll("form");
 123                 verifySizeExpectation(result, 1);
 124                 result = iFrameDocument.querySelectorAll("input");
 125                 verifySizeExpectation(result, 1);
 126
 127                 // Attributes exists.
 128                 result = iFrameDocument.querySelectorAll("[data-foo]");
 129                 verifySizeExpectation(result, 1);
 130                 result = iFrameDocument.querySelectorAll("[data-bar]");
 131                 verifySizeExpectation(result, 1);
 132                 result = iFrameDocument.querySelectorAll("[title]");
 133                 verifySizeExpectation(result, 1);
 134                 result = iFrameDocument.querySelectorAll("[href]");
 135                 verifySizeExpectation(result, 2);
 136
 137                 // Attribute = value.
 138                 result = iFrameDocument.querySelectorAll("[data-foo=bar]");
 139                 verifySizeExpectation(result, 1);
 140                 result = iFrameDocument.querySelectorAll("[data-bar=baz]");
 141                 verifySizeExpectation(result, 1);
 142                 result = iFrameDocument.querySelectorAll("[title='WebKit Tempalte Framework']");
 143                 verifySizeExpectation(result, 1);
 144                 result = iFrameDocument.querySelectorAll("[href='http://www.webkit.org/']");
 145                 verifySizeExpectation(result, 1);
 146
 147                 // Id.
 148                 result = iFrameDocument.querySelectorAll("#complex-multi-rules1");
 149                 verifySizeExpectation(result, 1);
 150                 result = iFrameDocument.querySelectorAll("#complex-multi-rules2");
 151                 verifySizeExpectation(result, 1);
 152                 result = iFrameDocument.querySelectorAll("#complex-multi-rules3");
 153                 verifySizeExpectation(result, 1);
 154                 result = iFrameDocument.querySelectorAll("#complex-multi-rules4");
 155                 verifySizeExpectation(result, 1);
 156                 result = iFrameDocument.querySelectorAll("#complex-multi-rules5");
 157                 verifySizeExpectation(result, 1);
 158                 result = iFrameDocument.querySelectorAll("#complex-multi-rules6");
 159                 verifySizeExpectation(result, 1);
 160                 result = iFrameDocument.querySelectorAll("#complex-multi-rules7");
 161                 verifySizeExpectation(result, 1);
 162                 result = iFrameDocument.querySelectorAll("#complex-multi-rules8");
 163                 verifySizeExpectation(result, 1);
 164
 165                 // Id with duplicate.
 166                 result = iFrameDocument.querySelectorAll("#duplicate-id");
 167                 verifySizeExpectation(result, 3);
 168
 169                 // .class.
 170                 result = iFrameDocument.querySelectorAll(".details-class");
 171                 verifySizeExpectation(result, 1);
 172                 result = iFrameDocument.querySelectorAll(".summary-class");
 173                 verifySizeExpectation(result, 1);
 174                 result = iFrameDocument.querySelectorAll(".article-class");
 175                 verifySizeExpectation(result, 1);
 176                 result = iFrameDocument.querySelectorAll(".result-class");
 177                 verifySizeExpectation(result, 1);
 178             }
 179         }
 180     }
 181 }
 182 PerfTestRunner.measureTime(test);
 183 </script>
 184 </html>