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

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:136.0) Gecko/20100101 Firefox/136.0

Browser: Firefox 136

Operating system: Mac OS X 10.15

Device Platform: Desktop

Date tested: one month ago

Test name	Executions per second
QuerySelectorAll	1705842.4 Ops/sec
getElementByXpath	386978.3 Ops/sec

HTML Preparation code:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fictional DOM</title>
</head>
<body>
    <div class="header">
        <h1>Welcome to the Fictional DOM</h1>
    </div>
    <div class="container">
        <div class="box">Box 1</div>
        <div class="box">Box 2</div>
        <div class="box">Box 3</div>
        <div class="box">Box 4</div>
        <div class="box">Box 5</div>
        <div class="box">Box 6</div>
        <div class="box">Box 7</div>
        <div class="box">Box 8</div>
        <div class="box">Box 9</div>
        <div class="box">Box 10</div>
        <div class="box">Box 11</div>
        <div class="box">Box 12</div>
        <div class="box">Box 13</div>
        <div class="box">Box 14</div>
        <div class="box">Box 15</div>
        <div class="box">Box 16</div>
        <div class="box">Box 17</div>
        <div class="box">Box 18</div>
        <div class="box">Box 19</div>
        <div class="box">Box 20</div>
        <div class="unique-box-1">Unique Box 1</div>
        <div class="unique-box-2">Unique Box 2</div>
        <div class="unique-box-3">Unique Box 3</div>
        <div class="unique-box-4">Unique Box 4</div>
        <div class="unique-box-5">Unique Box 5</div>
        <div class="unique-box-6">Unique Box 6</div>
        <div class="unique-box-7">Unique Box 7</div>
        <div class="unique-box-8">Unique Box 8</div>
        <div class="unique-box-9">Unique Box 9</div>
        <div class="unique-box-10">Unique Box 10</div>
        <div id="unique-box-11">Unique Box 11</div>
        <div id="unique-box-12">Unique Box 12</div>
        <div id="unique-box-13">Unique Box 13</div>
        <div id="unique-box-14">Unique Box 14</div>
        <div id="unique-box-15">Unique Box 15</div>
        <div id="unique-box-16">Unique Box 16</div>
        <div id="unique-box-17">Unique Box 17</div>
        <div id="unique-box-18">Unique Box 18</div>
        <div id="unique-box-19">Unique Box 19</div>
        <div id="unique-box-20">Unique Box 20</div>
    </div>
    <div class="footer">
        <p>Footer Content</p>
    </div>
</body>
</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
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);

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

QuerySelectorAll

getElementByXpath