Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
While loop vs Closest vs QuerySelector
(version: 0)
Benchmark.js
Comparing performance of:
while vs closest vs querySelector
Created:
4 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <style type="text/css"> .hidden { display: none; } </style> <div class="visible"> <div class="hidden"> <div class="hidden"> <div class="hidden hidden-last"></div> </div> </div> </div> <script> Benchmark.prototype.setup = function() { var $element = $('.hidden-last'); }; </script>
Tests:
while
while ($element.is(":hidden")) { $element = $element.parent(); }
closest
$element = $element.closest(':visible')
querySelector
$select = document.querySelector(".visible");
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
while
closest
querySelector
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) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/147.0.0.0 Safari/537.36
Browser/OS:
Chrome 147 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=628108" width="100%" height="500px"></iframe>
querySelector
5.6M/s
closest
33K/s
while
31K/s
View exact numbers
Test name
Executions per second
✓
querySelector
5,584,696 Ops/sec
closest
33,499 Ops/sec
while
31,002 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
I'll break down the benchmark for you. **What is tested?** MeasureThat.net is testing three different approaches to find an element in a DOM tree: 1. **While loop**: Using a while loop to traverse up the DOM tree until the element is found or the top of the tree is reached. 2. **Closest**: Using the `closest()` method, which returns the closest ancestor element that matches the specified selector. 3. **querySelector**: Using the `querySelector()` method, which returns the first element in the DOM tree that matches the specified CSS selector. **Options compared** The benchmark compares the performance of these three approaches on the same test case: * The test case involves a nested set of HTML elements with a `.hidden` class. * The script uses jQuery to select and manipulate the elements. **Pros and cons of each approach** 1. **While loop**: * Pros: Can be efficient for small trees or when traversing down the tree, as it only visits each element once. * Cons: Can be slow for large trees or when traversing up the tree, as it may visit many elements before finding the target. 2. **Closest**: * Pros: Efficiently finds the closest ancestor element that matches the selector. * Cons: May not find the target if there are multiple matching ancestors. 3. **querySelector**: * Pros: Fast and efficient for most use cases, as it uses a precompiled query plan and can leverage browser caching. * Cons: May be slower than `closest` in certain cases (e.g., when using a complex selector). **Library usage** The benchmark uses jQuery, which is a popular JavaScript library for DOM manipulation and event handling. The script preparation code includes a link to the jQuery minified library. **Special JS features/syntax** None mentioned. **Other alternatives** If you're looking for alternative approaches to find an element in a DOM tree, some options include: 1. **QuerySelectorAll**: Similar to `querySelector`, but returns all matching elements instead of just the first one. 2. **getElementById** or **getElementsByTagName**: Use an element's ID or a list of names to select it directly. 3. **Regular expressions**: Use regex patterns to match elements in the DOM tree. Keep in mind that each approach has its own trade-offs and use cases, so it's essential to choose the right one for your specific situation.
Related benchmarks
While loop vs Closest Js vanilla
While loop parentElement vs closest (vanilla javascript)
Comments
Confirm delete:
Do you really want to delete benchmark?