Benchmark: While loop parentElement vs closest (vanilla javascript)

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() {    
 	 let element = document.querySelector('.hidden-last'); 
  };


      
</script>

Tests:

while
while (element.classList.contains(".hidden")) { element = element.parentElement; }
closest
element = element.closest('.visible')

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
while
closest

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:128.0) Gecko/20100101 Firefox/128.0

Browser/OS: Firefox 128 on Linux

View result in a separate tab

Test name	Executions per second
while	376616992.0 Ops/sec
closest	4374458.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what is being tested.

**Benchmark Definition**

The benchmark compares two approaches to navigate through a DOM tree: `while` loop using `parentElement` and `closest` method. The test case uses jQuery library, which is loaded at the top of the HTML file.

**Options Compared**

Two options are compared:

1. **While Loop with `parentElement`**: This approach uses a traditional `while` loop to repeatedly retrieve the parent element until it reaches the root.
2. **Closest Method**: This approach uses jQuery's `closest` method, which traverses the DOM tree from the current element in search of an ancestor that matches the specified selector.

**Pros and Cons**

* **While Loop with `parentElement`**:
	+ Pros: Simple, lightweight, and widely supported.
	+ Cons: May be slower than other approaches due to the overhead of repeatedly retrieving parent elements using `parentElement`.
* **Closest Method**:
	+ Pros: Faster and more efficient than traditional loops, especially for deep DOM trees. Also, it can handle multiple selectors and edge cases more easily.
	+ Cons: Requires jQuery library, which may add extra weight and dependencies.

**Library and Its Purpose**

The test uses the jQuery library, which is a popular JavaScript library for simplifying DOM interactions, events, and animations. The `closest` method in particular is used to find an ancestor that matches a specific selector.

**Special JS Feature/Syntax**

This benchmark does not use any special or experimental JavaScript features/syntax.

**Other Alternatives**

If you prefer to avoid using jQuery or `closest`, you can try the following alternatives:

1. **Using `parentElement` only**: If you're comfortable with the overhead of repeatedly retrieving parent elements, this approach might be sufficient.
2. **Using `querySelectorAll` and indexing**: You can use `querySelectorAll` to select all elements at once and then index into the resulting array to access each element. This approach can be faster than using a traditional loop but may not be as readable.
3. **Using a recursive function**: You can write a recursive function to traverse the DOM tree, which can be more efficient than using a `while` loop.

Keep in mind that these alternatives might have different performance characteristics and readability trade-offs compared to the original benchmark.

Related benchmarks:

While loop parentElement vs closest (vanilla javascript) (version: 0)

Compare closest() to parentElement in a while loop

Comparing performance of: while vs closest

Created: one year ago by: Guest

Jump to the latest result

while

closest

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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