PerformanceTests/CSS/QuerySelector.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>