Benchmark: Node parent walking vs node contains

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.parentNode;}

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	8247887.5 Ops/sec
Closest	4168623.2 Ops/sec
parent walking	1681727.2 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the explanation of the provided benchmark.

**Benchmark Definition**

The benchmark is designed to compare three different approaches for traversing an HTML DOM tree:

1. `Node.contains()`
2. `Node.closest()` (not available in older browsers)
3. `parent walking` (also known as " traversing up the DOM tree" using a `while` loop)

**Options Compared**

The benchmark compares these three options because they are all used to access the parent or ancestor node of an element in the HTML DOM.

**Pros and Cons of Each Approach**

1. **Node.contains()**
	* Pros: Simple, concise, and widely supported.
	* Cons: Can be slower than other methods, especially for larger trees, since it involves a recursive search.
2. **Node.closest()**
	* Pros: Faster and more efficient than `contains()` for finding the closest ancestor node.
	* Cons: Not available in older browsers (Chrome 123 is likely using a custom implementation).
3. **Parent Walking**
	* Pros: Can be faster than other methods for larger trees, since it only traverses up the DOM tree once.
	* Cons: Requires more code and can be less readable due to the use of a `while` loop.

**Library**

The benchmark uses the W3C DOM (Document Object Model) API, which is a standardized set of interfaces for interacting with web pages in a programming language.

**Special JS Features/Syntax**

None mentioned. However, it's worth noting that Chrome 123 (the browser being tested) may have some custom implementations or optimizations that are not part of the standard DOM API.

**Other Considerations**

The benchmark is likely designed to measure performance in different scenarios, such as:

* Real-world web pages with complex DOM structures.
* Mobile devices and tablets, which often have slower processors and more limited resources than desktops.

**Alternatives**

If you're looking for alternatives or variations on these approaches, consider the following:

1. Use a library like jQuery to simplify DOM traversal and manipulation. However, keep in mind that using a library can add extra overhead and dependencies.
2. Explore other optimization techniques, such as caching results or using memoization, to improve performance when dealing with large DOM trees.
3. Consider using more modern JavaScript features, such as `forEach` and `reduce`, which can simplify DOM traversal and manipulation.

Overall, the benchmark provides a useful insight into the performance differences between three common approaches for traversing an HTML DOM tree.

Related benchmarks:

Node parent walking vs node contains (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):