Benchmark: While loop vs Closest Js vanilla

HTML Preparation code:


<style type="text/css">
.hidden {
display: none;
}
</style>
<div class="visible">
<div class="hidden">
<div class="hidden">
<div class="hidden" id="hidden-last"></div>
</div>
</div>
</div>
      

      <script>

        Benchmark.prototype.setup = function() {

          
  var element = document.getElementById('hidden-last');

        
  };


      
</script>

Tests:

while
while (element && 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 month 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	249739952.0 Ops/sec
closest	4384973.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what is being tested, compared, and their pros and cons.

**Benchmark Overview**

MeasureThat.net provides a platform for creating and running JavaScript microbenchmarks. The provided benchmark compares two approaches: a traditional `while` loop (also known as a " manual iteration" or " explicit loop") and the `closest()` method from the jQuery library.

**What is being tested?**

The benchmark tests the execution speed of both approaches on a sample HTML structure with multiple elements containing the class "hidden". The test measures the number of executions per second for each approach.

**Options compared:**

1. **While loop**: A traditional, manual iteration loop that uses a conditional statement to check if the element exists and has the specified class.
2. **Closest() method from jQuery library**: A method that returns the closest ancestor element matching the selector (in this case, `.visible`).

**Pros and Cons of each approach:**

1. **While Loop**
	* Pros:
		+ Highly flexible and customizable
		+ Can be used in situations where no parent-child relationship is known
	* Cons:
		+ May be slower due to the overhead of explicit loop logic
		+ Requires manual incrementing of the element reference variable
2. **Closest() method from jQuery library**
	* Pros:
		+ Highly optimized and efficient for similar use cases
		+ Provides a convenient and concise way to traverse the DOM
	* Cons:
		+ Requires jQuery library inclusion, which can add overhead
		+ May not be suitable for situations where no parent-child relationship is known

**Library: jQuery**

The `closest()` method is part of the jQuery library. It's a utility function that returns the closest ancestor element matching the specified selector. In this benchmark, it's used to find the closest ancestor element with the class "visible".

**Special JS feature or syntax: None mentioned**

No special JavaScript features or syntax are being tested in this benchmark.

**Other alternatives:**

If you don't want to use jQuery, you can consider alternative libraries like:

1. **vanilla-JS approaches**: Other vanilla-JS methods for traversing the DOM, such as `querySelector`, `querySelectorAll`, and `getElementsByClassName`.
2. **Pure JavaScript implementations**: Implementations that don't rely on external libraries like jQuery, but rather use native JavaScript methods to traverse the DOM.
3. **Other DOM traversal methods**: Methods like `next()`, `prev()`, `siblings()`, and `contains()` from various libraries or frameworks.

Keep in mind that these alternatives may have different performance characteristics and trade-offs compared to the `closest()` method.

Related benchmarks:

While loop vs Closest Js vanilla (version: 0)

Comparing performance of: while vs closest

Created: 4 years ago by: Guest

Jump to the latest result

while

closest

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):