Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
document.evaluate(xpath) vs querySelectorAll
(version: 1)
Comparing performance of:
QuerySelectorAll vs getElementByXpath
Created:
one year ago
by:
Guest
Jump to the latest result
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>
Run tests (2)
Previous results
Fork
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
Embed
Embed Benchmark Result
Test name
Executions per second
QuerySelectorAll
1364808.9 Ops/sec
getElementByXpath
169483.3 Ops/sec
Related benchmarks:
document.getElementsByClassName (from document) vs parent.getElementsByClassName (from an element)
document.querySelector (from document) vs parent.querySelector (from an element)
querySelector vs querySelectorAll vs getElementsByClassName vs querySelector (ID) vs getElementsByID (2)
aaaaafffffffffffffggg
querySelector vs getElementsByTagName
test_html_in_javascript
find vs innderHtml
closest comparision
closest comparision 2
Comments
Confirm delete:
Do you really want to delete benchmark?