Benchmark: node.contains() vs node.parentNode

HTML Preparation code:

<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>

<div id="outer">
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div id="inner">

</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>


<div id="outer2">
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div id="inner2">

</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Script Preparation code:

var inner = document.getElementById("inner");
var outer = document.getElementById("outer");
var inner2 = document.getElementById("inner2");
var outer2 = document.getElementById("outer2");

Tests:

node.contains
var x = outer.contains(inner) var y = outer.contains(inner2) var z = outer2.contains(inner) var a = outer2.contains(inner2)
node.parentNode
function isDescendant(parent, child) { var node = child.parentNode; while (node != null) { if (node == parent) { return true; } node = node.parentNode; } return false; } var x = isDescendant(outer, inner); var y = isDescendant(outer, inner2); var z = isDescendant(outer2, inner); var a = isDescendant(outer2, inner2);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
node.contains
node.parentNode

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 26 days ago):

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks!

**Benchmark Overview**

The provided benchmark compares two approaches for checking if an element is contained within another element in a DOM tree: `node.contains()` and `node.parentNode`. The test case uses jQuery, a popular JavaScript library, to manipulate the HTML document.

**What are we testing?**

We're comparing the performance of these two approaches:

1. `node.contains()`: This method checks if an element is contained within another element in the DOM tree.
2. `node.parentNode`: This method returns the parent node of an element and can be used to check if an element is a descendant of another element.

**Options Compared**

The benchmark compares the performance of these two approaches:

* `node.contains()`
* `node.parentNode`

**Pros and Cons of Each Approach**

1. **`node.contains()`**
	* Pros:
		+ Faster, as it directly checks for containment in the DOM tree.
		+ More straightforward to implement, as it only requires a simple property check (`outer.contains(inner)`).
	* Cons:
		+ May have performance implications if the DOM tree is very large or complex.
2. **`node.parentNode`**
	* Pros:
		+ Can be more flexible, as it allows for checking containment using a parent node's ancestors (not just direct parents).
		+ Can be useful in cases where `contains()` is not available or supported.
	* Cons:
		+ Slower, as it involves traversing the DOM tree from the child element to its root.
		+ More complex to implement, as it requires iterating over ancestor nodes.

**Library: jQuery**

In this benchmark, jQuery is used to manipulate the HTML document and create a nested DOM structure. Specifically, jQuery's `document.getElementById()` method is used to retrieve elements by their IDs.

**Special JS Feature/Syntax (None)**

This benchmark does not use any special JavaScript features or syntax that would affect its performance or outcome.

**Other Alternatives**

If you're looking for alternative approaches or have specific requirements, consider the following:

* Use a more lightweight DOM library, like DOMPurify, which might improve performance.
* Implement a custom containment check using a different algorithm, such as using a binary search tree (BST) to quickly locate elements in the DOM tree.
* Use a virtual DOM representation, like React or Vue.js, which can optimize rendering and containment checks.

**Benchmark Preparation Code**

The provided script preparation code creates two nested DOM structures with jQuery, defining `inner` and `outer` elements as child nodes of each other. The HTML preparation code includes the necessary HTML structure for these elements.

**Individual Test Cases**

Each test case defines a unique benchmark by modifying the `node.contains()` or `isDescendant(outer, inner)` function to generate specific input values (e.g., different element IDs or parent-child relationships).

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36

Browser/OS: Chrome 107 on Linux

View result in a separate tab

Test name	Executions per second
node.contains	1446545.0 Ops/sec
node.parentNode	616384.6 Ops/sec

Related benchmarks:

node.contains() vs node.parentNode (version: 0)

Comparing performance of: node.contains vs node.parentNode

Created: 2 years ago by: Guest

Jump to the latest result

node.contains

node.parentNode

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 26 days ago):