Benchmark: Node parent walking vs node contains 2

HTML Preparation code:

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

Script Preparation code:

var parent = document.querySelector(".parent");
var child = document.querySelector(".child");

Tests:

Contains
var x = parent.contains(child)
Closest
var x = child.closest('.parent')
parent walking
let p = child; while (p != null){ if(p == parent ) {break;} p = p.parentElement;}

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Contains
Closest
parent walking

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

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

Browser/OS: Chrome 123 on Windows

View result in a separate tab

Test name	Executions per second
Contains	8322445.5 Ops/sec
Closest	4089366.5 Ops/sec
parent walking	1610919.9 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 definition, test cases, and results to explain what's being tested.

**Benchmark Definition**

The benchmark measures the performance of three different approaches for finding a DOM element:

1. `parent.contains(child)`: This method checks if an element is contained within another element. It returns a boolean value indicating whether the child element exists as a direct or indirect descendant of the parent element.
2. `child.closest('.parent')`: This method finds the closest ancestor element that matches the given CSS selector `.parent`. It returns the matched element or null if no match is found.
3. `let p = child; while (p != null) { if(p == parent ) {break;} p = p.parentElement;}`: This approach uses a while loop to traverse the DOM tree from the child element up to its parent until it finds the desired parent element.

**Options Comparison**

The three approaches have different characteristics:

* **Performance**: The `closest` method is generally faster than the `contains` method, which is faster than the `parent walking` approach. This is because `closest` uses a more efficient algorithm that stops as soon as it finds a matching ancestor, whereas `contains` and `parent walking` continue traversing the DOM tree until they reach the desired element.
* **Memory usage**: The `parent walking` approach requires more memory than the other two methods since it creates an additional variable `p` to hold the current element being processed. This can be a concern for large DOM trees or performance-critical applications.
* **Code readability and simplicity**: The `closest` method is often considered more readable and simpler than the `parent walking` approach, which requires manual loop control.

**Pros and Cons**

Here's a summary of the pros and cons of each approach:

* **Contains**:
	+ Pros: Simple to implement, easy to understand.
	+ Cons: Can be slower than `closest`, may not work correctly for certain edge cases (e.g., when the child element is a descendant of a different parent).
* **Closest**:
	+ Pros: Fast, efficient algorithm, works well for most use cases.
	+ Cons: May return null if no matching ancestor is found, which can lead to errors in some applications.
* **Parent walking**:
	+ Pros: Can be more readable and understandable for developers familiar with manual DOM traversal, allows for control over the loop logic.
	+ Cons: Requires more memory due to the `p` variable, potentially slower than `closest`.

**Library and Special JS Features**

There are no notable libraries or special JavaScript features mentioned in this benchmark. The test cases only rely on built-in DOM methods and standard JavaScript syntax.

**Alternatives**

If you're interested in exploring alternative approaches, here are a few options:

* **Use a dedicated DOM querying library**: Libraries like jQuery or Zepto provide more efficient and flexible DOM querying mechanisms that might be worth investigating.
* **Consider using a CSS-based approach**: Some modern browsers support CSS filters or CSS variables that can simplify DOM traversal and element selection. However, these approaches are still experimental and may not be widely supported.

Keep in mind that the specific use case and requirements of your project will ultimately determine the best approach for finding DOM elements.

Related benchmarks:

Node parent walking vs node contains 2 (version: 0)

Comparing performance of: Contains vs Closest vs parent walking

Created: 2 years ago by: Guest

Jump to the latest result

Contains

Closest

parent walking

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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