MeasureThat.net

Run results for: document.evaluate(xpath) vs querySelectorAll

Go to the benchmark
Run details:
Mozilla/5.0 (iPhone; CPU iPhone OS 18_3_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.3.1 Mobile/15E148 Safari/604.1
Mobile Safari 18
iOS 18.3.2
Mobile
16 days ago
Test name Executions per second
QuerySelectorAll 22683404.0 Ops/sec
getElementByXpath 439474.7 Ops/sec
HTML Preparation code:
AخA
 
1
<head>
2
    <meta charset="UTF-8">
3
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
4
    <title>Fictional DOM</title>
5
</head>
6
<body>
7
    <div class="header">
8
        <h1>Welcome to the Fictional DOM</h1>
9
    </div>
10
    <div class="container">
11
        <div class="box">Box 1</div>
12
        <div class="box">Box 2</div>
13
        <div class="box">Box 3</div>
14
        <div class="box">Box 4</div>
15
        <div class="box">Box 5</div>
16
        <div class="box">Box 6</div>
17
        <div class="box">Box 7</div>
18
        <div class="box">Box 8</div>
19
        <div class="box">Box 9</div>
20
        <div class="box">Box 10</div>
21
        <div class="box">Box 11</div>
22
        <div class="box">Box 12</div>
23
        <div class="box">Box 13</div>
24
        <div class="box">Box 14</div>
25
        <div class="box">Box 15</div>
26
        <div class="box">Box 16</div>
27
        <div class="box">Box 17</div>
28
        <div class="box">Box 18</div>
29
        <div class="box">Box 19</div>
30
        <div class="box">Box 20</div>
31
        <div class="unique-box-1">Unique Box 1</div>
32
        <div class="unique-box-2">Unique Box 2</div>
33
        <div class="unique-box-3">Unique Box 3</div>
34
        <div class="unique-box-4">Unique Box 4</div>
35
        <div class="unique-box-5">Unique Box 5</div>
36
        <div class="unique-box-6">Unique Box 6</div>
37
        <div class="unique-box-7">Unique Box 7</div>
38
        <div class="unique-box-8">Unique Box 8</div>
39
        <div class="unique-box-9">Unique Box 9</div>
40
        <div class="unique-box-10">Unique Box 10</div>
41
        <div id="unique-box-11">Unique Box 11</div>
42
        <div id="unique-box-12">Unique Box 12</div>
43
        <div id="unique-box-13">Unique Box 13</div>
44
        <div id="unique-box-14">Unique Box 14</div>
45
        <div id="unique-box-15">Unique Box 15</div>
46
        <div id="unique-box-16">Unique Box 16</div>
47
        <div id="unique-box-17">Unique Box 17</div>
48
        <div id="unique-box-18">Unique Box 18</div>
49
        <div id="unique-box-19">Unique Box 19</div>
50
        <div id="unique-box-20">Unique Box 20</div>
51
    </div>
52
    <div class="footer">
53
        <p>Footer Content</p>
54
    </div>
55
</body>
56
</html>
Script Preparation code:
 
/*your preparation JavaScript code goes here
To execute async code during the script preparation, wrap it as function globalMeasureThatScriptPrepareFunction, example:*/
async function globalMeasureThatScriptPrepareFunction() {
    // This function is optional, feel free to remove it.
    // await someThing();
}
Tests:

  • QuerySelectorAll

     
    const allDivs = document.querySelectorAll("div")

  • getElementByXpath

    ​x
     
    function getElementsByXPath(xpath) {
        const result = document.evaluate(xpath, document, null, XPathResult.ANY_TYPE, null);
        const elements = [];
        let node = result.iterateNext();
        while (node) {
            elements.push(node);
            node = result.iterateNext();
        }
        return elements;
    }
    ​
    const xpath = "//div"; // 
    const selectedElements = getElementsByXPath(xpath);