Benchmark: Finding parent element: Closest vs Loop vs Recursion

HTML Preparation code:

<div class="parent">
  <div class="child">
    <div class="child">
      <div class="child child-last"></div>
    </div>
  </div>
</div>

Script Preparation code:


   
Benchmark.prototype.setup = function() {
  var isParent = function(el) {
    return el.classList.contains('parent');
  }

  var findParent = function(el) {
    if (isParent(el)) return el
    if (!el.parentNode) return false
    return findParent(el.parentNode)
  }
  var element = document.getElementsByClassName('child-last')[0];
};

Tests:

Closest
element = element.closest('.parent')
Loop
while (element) { if (isParent(element)) break; if (!element.parentNode) break; element = element.parentNode; }
Recursion
element = findParent(element)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Closest
Loop
Recursion

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 8 months ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Safari/537.36

Browser/OS: Chrome 140 on Windows

View result in a separate tab

Test name	Executions per second
Closest	8211660.5 Ops/sec
Loop	8655030.0 Ops/sec
Recursion	8792291.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The benchmark measures the performance of three approaches to find the closest parent element in an HTML tree:

1. Using the `closest()` method
2. Using a loop
3. Recursion

**Options Compared**

The benchmark compares the execution speed of these three approaches:

* **Closest**: Uses the `closest()` method to find the nearest ancestor that matches a specified selector.
* **Loop**: Uses a simple loop to traverse the DOM tree until it finds the parent element.
* **Recursion**: Uses a recursive function to traverse the DOM tree.

**Pros and Cons of Each Approach**

1. **Closest**:
	* Pros: Simple, efficient, and widely supported.
	* Cons: May not work in older browsers that don't support `closest()`.
2. **Loop**:
	* Pros: Low memory usage, can be optimized for small trees.
	* Cons: Can be slow and cumbersome to implement manually.
3. **Recursion**:
	* Pros: Elegant and easy to understand, but may not perform well on large trees due to stack overhead.

**Library Used**

None of the approaches rely on a specific JavaScript library. However, it's worth noting that some browsers may have additional optimizations or features enabled when running benchmarks, which can affect the results.

**Special JS Feature/Syntax**

The `closest()` method is a modern feature introduced in HTML5, and its performance can vary across browsers. The loop approach uses vanilla JavaScript, while the recursive function uses a simple iterative approach without any special syntax.

**Benchmark Preparation Code**

The script preparation code defines two functions: `isParent` and `findParent`. These functions are used to test the three approaches:

* `isParent`: Returns true if an element has the class "parent".
* `findParent`: Recursively finds the parent element of a given element.

The HTML preparation code creates a sample DOM tree with nested elements, which is used as input for the benchmark.

**Benchmark Results**

The latest benchmark results show that:

* **Closest**: Performs the fastest, with an average execution speed of 5729224.0 executions per second.
* **Loop**: Slower than closest but faster than recursion, with an average execution speed of 4890026.0 executions per second.
* **Recursion**: The slowest approach, with an average execution speed of 4810901.0 executions per second.

**Alternatives**

If you're looking for alternative approaches or want to explore other optimization techniques, consider the following:

* Using a different DOM traversal algorithm, such as breadth-first search (BFS) or depth-first search (DFS).
* Optimizing the loop approach by using a more efficient data structure, such as a trie.
* Investigating modern JavaScript features like Web Workers or WebAssembly for parallel processing and improved performance.

Related benchmarks:

Finding parent element: Closest vs Loop vs Recursion (version: 0)

Comparing performance of: Closest vs Loop vs Recursion

Created: 3 years ago by: Guest

Jump to the latest result

Closest

Loop

Recursion

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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