184 lines
10 KiB
HTML
184 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Query selector benchmark.</title>
|
|
<script src="../resources/runner.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
</body>
|
|
<script>
|
|
|
|
var iframe = document.createElement("iframe");
|
|
iframe.style.display = "none";
|
|
document.body.appendChild(iframe);
|
|
|
|
function verifySizeExpectation(result, expectedSize)
|
|
{
|
|
if (result.length != expectedSize)
|
|
throw "The query did not return the expected results."
|
|
}
|
|
|
|
var test = {
|
|
description: "This tests the performance of querySelector for a variety of common use cases.",
|
|
setup: function() {
|
|
// In order to restrict caching between operations, the tree is rebuilt from scratch.
|
|
var spec = PerfTestRunner.loadFile("resources/query-selector.html");
|
|
iframe.contentDocument.firstChild.innerHTML = spec;
|
|
},
|
|
run: function() {
|
|
var iFrameDocument = iframe.contentDocument;
|
|
|
|
for (var repeat = 0; repeat < 5; ++repeat) {
|
|
/// Various multiselector. About 15% of the queries.
|
|
for (var i = 0; i < 150; ++i) {
|
|
// Complex descent.
|
|
var result = iFrameDocument.querySelectorAll("html body div>#complex-multi-rules1 .some-class li[data-bar].some-class");
|
|
verifySizeExpectation(result, 1);
|
|
|
|
// id tag.
|
|
verifySizeExpectation(iFrameDocument.querySelectorAll("#complex-multi-rules2 acronym"), 1);
|
|
verifySizeExpectation(iFrameDocument.querySelectorAll("[id='complex-multi-rules2'] a"), 1);
|
|
|
|
// Multiple id + selector, sharing the same id.
|
|
result = iFrameDocument.querySelectorAll("#complex-multi-rules3 source, #complex-multi-rules3 li, #complex-multi-rules3 td");
|
|
verifySizeExpectation(result, 11);
|
|
result = iFrameDocument.querySelectorAll("[id='complex-multi-rules3'] source, [id='complex-multi-rules3'] li, [id='complex-multi-rules3'] td");
|
|
verifySizeExpectation(result, 11);
|
|
result = iFrameDocument.querySelectorAll("#complex-multi-rules3 .some-class, #complex-multi-rules3 .other-class");
|
|
verifySizeExpectation(result, 7);
|
|
result = iFrameDocument.querySelectorAll("[id='complex-multi-rules3'] .some-class, [id='complex-multi-rules3'] li, [id='complex-multi-rules3'] .other-class");
|
|
verifySizeExpectation(result, 7);
|
|
|
|
// Several Ids.
|
|
result = iFrameDocument.querySelectorAll("#complex-multi-rules4 #complex-multi-rules4-sub1 #complex-multi-rules4-sub2 #complex-multi-rules4-sub3");
|
|
verifySizeExpectation(result, 1);
|
|
result = iFrameDocument.querySelectorAll("#complex-multi-rules4 [id='complex-multi-rules4-sub1'] #complex-multi-rules4-sub2 [id='complex-multi-rules4-sub3']");
|
|
result = iFrameDocument.querySelectorAll("[id='complex-multi-rules4'] [id='complex-multi-rules4-sub1'] [id='complex-multi-rules4-sub2'] [id='complex-multi-rules4-sub3']");
|
|
verifySizeExpectation(result, 1);
|
|
|
|
// Id sandwich: Multiple ids with selectors in between.
|
|
result = iFrameDocument.querySelectorAll("#complex-multi-rules5 div #complex-multi-rules5-left ul li.other-class #complex-multi-rules5-right table tr>td");
|
|
verifySizeExpectation(result, 2);
|
|
result = iFrameDocument.querySelectorAll("div#complex-multi-rules5>div div#complex-multi-rules5-left ul .other-class p img#complex-multi-rules5-image");
|
|
verifySizeExpectation(result, 1);
|
|
|
|
// Named form attribute under hierarchy.
|
|
result = iFrameDocument.querySelectorAll("input[name='complex-multi-rules6-file-input']");
|
|
verifySizeExpectation(result, 1);
|
|
result = iFrameDocument.querySelectorAll("form input[name='complex-multi-rules6-file-input']");
|
|
verifySizeExpectation(result, 1);
|
|
result = iFrameDocument.querySelectorAll("form[name='complex-multi-rules6-form'] input[name='complex-multi-rules6-file-input']");
|
|
verifySizeExpectation(result, 1);
|
|
result = iFrameDocument.querySelectorAll("form[name='complex-multi-rules6-form'] div input[name='complex-multi-rules6-file-input']");
|
|
verifySizeExpectation(result, 1);
|
|
result = iFrameDocument.querySelectorAll("form[name='complex-multi-rules6-form'] div div input[name='complex-multi-rules6-file-input']");
|
|
verifySizeExpectation(result, 1);
|
|
result = iFrameDocument.querySelectorAll("form[name='complex-multi-rules6-form']>div>div>input[name='complex-multi-rules6-file-input']");
|
|
verifySizeExpectation(result, 1);
|
|
|
|
// Hierarchy of tag and class.
|
|
result = iFrameDocument.querySelectorAll("div div a div div p.result-class");
|
|
verifySizeExpectation(result, 1);
|
|
result = iFrameDocument.querySelectorAll("div div.some-class a.other-class div.another-class div p.result-class");
|
|
verifySizeExpectation(result, 1);
|
|
result = iFrameDocument.querySelectorAll("div>div>a div div p.result-class");
|
|
verifySizeExpectation(result, 1);
|
|
result = iFrameDocument.querySelectorAll("div>div.some-class>a.other-class>div.another-class>div>p.result-class");
|
|
verifySizeExpectation(result, 1);
|
|
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");
|
|
verifySizeExpectation(result, 1);
|
|
}
|
|
|
|
// tag.class. About 10% of the queries
|
|
for (var i = 0; i < 100; ++i) {
|
|
result = iFrameDocument.querySelectorAll("details.details-class");
|
|
verifySizeExpectation(result, 1);
|
|
result = iFrameDocument.querySelectorAll("summary.summary-class");
|
|
verifySizeExpectation(result, 1);
|
|
result = iFrameDocument.querySelectorAll("article.article-class");
|
|
verifySizeExpectation(result, 1);
|
|
}
|
|
|
|
// Single selector query, 75% of the queries. Split between:
|
|
// -tag
|
|
// -[attribute]
|
|
// -exist
|
|
// -value=something
|
|
// -#id
|
|
// -.class
|
|
for (var i = 0; i < 750; ++i) {
|
|
// Tags.
|
|
result = iFrameDocument.querySelectorAll("details");
|
|
verifySizeExpectation(result, 1);
|
|
result = iFrameDocument.querySelectorAll("summary");
|
|
verifySizeExpectation(result, 1);
|
|
result = iFrameDocument.querySelectorAll("article");
|
|
verifySizeExpectation(result, 1);
|
|
result = iFrameDocument.querySelectorAll("head");
|
|
verifySizeExpectation(result, 1);
|
|
result = iFrameDocument.querySelectorAll("body");
|
|
verifySizeExpectation(result, 1);
|
|
result = iFrameDocument.querySelectorAll("form");
|
|
verifySizeExpectation(result, 1);
|
|
result = iFrameDocument.querySelectorAll("input");
|
|
verifySizeExpectation(result, 1);
|
|
|
|
// Attributes exists.
|
|
result = iFrameDocument.querySelectorAll("[data-foo]");
|
|
verifySizeExpectation(result, 1);
|
|
result = iFrameDocument.querySelectorAll("[data-bar]");
|
|
verifySizeExpectation(result, 1);
|
|
result = iFrameDocument.querySelectorAll("[title]");
|
|
verifySizeExpectation(result, 1);
|
|
result = iFrameDocument.querySelectorAll("[href]");
|
|
verifySizeExpectation(result, 2);
|
|
|
|
// Attribute = value.
|
|
result = iFrameDocument.querySelectorAll("[data-foo=bar]");
|
|
verifySizeExpectation(result, 1);
|
|
result = iFrameDocument.querySelectorAll("[data-bar=baz]");
|
|
verifySizeExpectation(result, 1);
|
|
result = iFrameDocument.querySelectorAll("[title='WebKit Tempalte Framework']");
|
|
verifySizeExpectation(result, 1);
|
|
result = iFrameDocument.querySelectorAll("[href='http://www.webkit.org/']");
|
|
verifySizeExpectation(result, 1);
|
|
|
|
// Id.
|
|
result = iFrameDocument.querySelectorAll("#complex-multi-rules1");
|
|
verifySizeExpectation(result, 1);
|
|
result = iFrameDocument.querySelectorAll("#complex-multi-rules2");
|
|
verifySizeExpectation(result, 1);
|
|
result = iFrameDocument.querySelectorAll("#complex-multi-rules3");
|
|
verifySizeExpectation(result, 1);
|
|
result = iFrameDocument.querySelectorAll("#complex-multi-rules4");
|
|
verifySizeExpectation(result, 1);
|
|
result = iFrameDocument.querySelectorAll("#complex-multi-rules5");
|
|
verifySizeExpectation(result, 1);
|
|
result = iFrameDocument.querySelectorAll("#complex-multi-rules6");
|
|
verifySizeExpectation(result, 1);
|
|
result = iFrameDocument.querySelectorAll("#complex-multi-rules7");
|
|
verifySizeExpectation(result, 1);
|
|
result = iFrameDocument.querySelectorAll("#complex-multi-rules8");
|
|
verifySizeExpectation(result, 1);
|
|
|
|
// Id with duplicate.
|
|
result = iFrameDocument.querySelectorAll("#duplicate-id");
|
|
verifySizeExpectation(result, 3);
|
|
|
|
// .class.
|
|
result = iFrameDocument.querySelectorAll(".details-class");
|
|
verifySizeExpectation(result, 1);
|
|
result = iFrameDocument.querySelectorAll(".summary-class");
|
|
verifySizeExpectation(result, 1);
|
|
result = iFrameDocument.querySelectorAll(".article-class");
|
|
verifySizeExpectation(result, 1);
|
|
result = iFrameDocument.querySelectorAll(".result-class");
|
|
verifySizeExpectation(result, 1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
PerfTestRunner.measureTime(test);
|
|
</script>
|
|
</html> |