Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
querySelectorAll vs query
(version: 0)
100 Li elements using querySelectorAll and custom query function got from http://ryanmorr.com/abstract-away-the-performance-faults-of-queryselectorall/
Comparing performance of:
query vs querySelectorAll vs getElementByTagName
Created:
8 years ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<html> <body> <ul style="list-style: none outside none;"> <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li> </ul> </body> </html>
Script Preparation code:
function query(selector, context) { context = context || document; // Redirect simple selectors to the more performant function if (/^(#?[\w-]+|\.[\w-.]+)$/.test(selector)) { switch (selector.charAt(0)) { case '#': // Handle ID-based selectors return [context.getElementById(selector.substr(1))]; case '.': // Handle class-based selectors // Query by multiple classes by converting the selector // string into single spaced class names var classes = selector.substr(1).replace(/\./g, ' '); return [].slice.call(context.getElementsByClassName(classes)); default: // Handle tag-based selectors return [].slice.call(context.getElementsByTagName(selector)); } } // Default to `querySelectorAll` return [].slice.call(context.querySelectorAll(selector)); }
Tests:
query
query("li")
querySelectorAll
document.querySelectorAll("li")
getElementByTagName
document.getElementsByTagName("li")
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
query
querySelectorAll
getElementByTagName
Fastest:
N/A
Slowest:
N/A
Latest run results:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
A daunting task! To answer this question, I'll need to parse the HTML string and extract relevant information for each test case. Here's my attempt: **Parsed HTML:** ```html <ul> <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li> <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li> ... </ul> ``` **Individual Test Cases:** 1. **Test Name:** "query" * **Benchmark Definition:** `document.querySelector("li")` * **Result:** The first `li` element is selected. 2. **Test Name:** "querySelectorAll" * **Benchmark Definition:** `document.querySelectorAll("li")` * **Result:** All `li` elements are selected. 3. **Test Name:** "getElementByTagName" * **Benchmark Definition:** `document.getElementsByTagName("li")` * **Result:** An array of all `li` elements is returned. **Latest Benchmark Result:** 1. **Test Name:** "getElementByTagName" * **RawUAString:** Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.89 Safari/537.36 * **Browser:** Chrome 62 * **DevicePlatform:** Other * **OperatingSystem:** Windows 8.1 * **ExecutionsPerSecond:** 3356147.25 2. **Test Name:** "querySelectorAll" * **RawUAString:** Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.89 Safari/537.36 * **Browser:** Chrome 62 * **DevicePlatform:** Other * **OperatingSystem:** Windows 8.1 * **ExecutionsPerSecond:** 47768.44921875 3. **Test Name:** "query" * **RawUAString:** Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.89 Safari/537.36 * **Browser:** Chrome 62 * **DevicePlatform:** Other * **OperatingSystem:** Windows 8.1 * **ExecutionsPerSecond:** 38186.578125 Please let me know if I've correctly parsed the HTML and extracted the required information for each test case!
Related benchmarks:
querySelector() vs getElementsByClassName()[0]
getElementsByClassName()[0] vs querySelectorAll
speed test query selector vs classname1
Performance of query selector vs className
querySelector(class) vs classList.some
Comments
Confirm delete:
Do you really want to delete benchmark?