Benchmark: While loop vs Closest vs QuerySelector

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>

Previous results

Test case name	Result
while
closest
querySelector

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 15 days 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

Test name	Executions per second
while	31002.4 Ops/sec
closest	33498.6 Ops/sec
querySelector	5584696.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

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 vs QuerySelector (version: 0)

Comparing performance of: while vs closest vs querySelector

Created: 4 years ago by: Guest

Jump to the latest result

while

closest

querySelector

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):