Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
querySelector vs querySelectorAll simple 2
(version: 0)
Comparing performance of:
querySelector vs querySelectorAll vs ByClassName
Created:
3 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div class="test321312"></div> <div class="test321312"></div> <div class="test321312"></div> <div class="test321312"></div> <div class="test321312"></div> <div class="test321312"></div> <div class="test321312"></div> <div class="test321312"></div> <div class="test321312"></div> <div class="test321312"></div> <div class="test321312"></div> <div class="test321312"></div> <div class="test321312"></div> <div class="test321312"></div> <div class="test321312"></div> <div class="test321312"></div> <div class="test321312"></div> <div class="test321312"></div> <div class="test321312"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test3213123"></div> <div class="test pipoca"></div> <div class="test"></div> <div class="test dsadsadas"></div> <div class="test sadasds"></div> <div class="test lalalala"></div> <div class="test"></div> <div class="test sadasdasd"></div>
Tests:
querySelector
document.querySelector(".test.pipoca")
querySelectorAll
document.querySelectorAll(".test.pipoca")
ByClassName
document.getElementsByClassName("test pipoca")
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
querySelector
querySelectorAll
ByClassName
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
2 years ago
)
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 YaBrowser/24.6.0.0 Safari/537.36
Browser/OS:
Yandex Browser 24 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=534421" width="100%" height="500px"></iframe>
ByClassName
6.6M/s
querySelector
2.5M/s
querySelectorAll
1.3M/s
View exact numbers
Test name
Executions per second
✓
ByClassName
6,586,846 Ops/sec
querySelector
2,450,096 Ops/sec
querySelectorAll
1,334,048 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the provided benchmark definition and results. **Benchmark Definition:** The benchmark consists of three individual test cases: 1. `document.querySelector(".test.pipoca")`: This test case uses the `querySelector` method to select an element with the class `test.pipoca`. 2. `document.querySelectorAll(".test.pipoca")`: This test case uses the `querySelectorAll` method to select all elements with the class `test.pipoca`. 3. `document.getElementsByClassName("test pipoca")`: This test case uses the `getElementsByClassName` method to select all elements with the class `test pipoca`. Note that this method is not supported in modern browsers, and it's likely used for compatibility purposes. **Options being compared:** The benchmark compares three different methods: 1. `querySelector`: A DOM querying method that returns a single element matching the specified selector. 2. `querySelectorAll`: A DOM querying method that returns a NodeList containing all elements matching the specified selector. 3. `getElementsByClassName` (Deprecated): An older method for selecting elements by class name. **Pros and Cons:** 1. **querySelector**: * Pros: Fast, efficient, and widely supported in modern browsers. * Cons: May not return results if no element matches the selector. 2. **querySelectorAll**: * Pros: Returns all matching elements, which can be useful for certain use cases. * Cons: Can be slower than `querySelector` because it needs to iterate over all matching elements. 3. **getElementsByClassName (Deprecated)**: * Pros: None notable in this context. * Cons: This method is older and less efficient than the other two, but might still be required for compatibility reasons. **Library used:** None of the test cases explicitly uses a library. However, `querySelectorAll` and `getElementsByClassName` are part of the DOM API, which is built into modern browsers. **Special JS feature or syntax:** There's no special JavaScript feature or syntax mentioned in this benchmark. It only relies on standard DOM querying methods. **Other alternatives:** If you wanted to measure performance for other query methods, here are some examples: * `document.getElementsByTagName`: Similar to `getElementsByClassName`, but it returns a HTMLCollection (an array-like object) instead of a NodeList. * `document.querySelectorAll([selector])` with multiple selectors separated by spaces: This would return all elements matching any of the specified selectors. Keep in mind that these alternatives might not be as efficient or widely supported as the methods used in this benchmark.
Related benchmarks
querySelector(nth) vs querySelectorAll
Comments
Confirm delete:
Do you really want to delete benchmark?