Benchmark: document.evaluate(xpath) vs querySelectorAll

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);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
QuerySelectorAll
getElementByXpath

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 4 months ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:140.0) Gecko/20100101 Firefox/140.0

Browser/OS: Firefox 140 on Windows

View result in a separate tab

Test name	Executions per second
QuerySelectorAll	1364808.9 Ops/sec
getElementByXpath	169483.3 Ops/sec

Related benchmarks:

document.evaluate(xpath) vs querySelectorAll (version: 1)

Comparing performance of: QuerySelectorAll vs getElementByXpath

Created: one year ago by: Guest

Jump to the latest result

QuerySelectorAll

getElementByXpath

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A