Benchmark: jQuery.contains() vs. Node.contains() vs reverse checking

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:

jQuery.contains()
var x = jQuery.contains(outer, inner) var y = jQuery.contains(outer, inner2) var z = jQuery.contains(outer2, inner) var a = jQuery.contains(outer2, inner2)
Node.contains()
var x = outer.contains(inner) var y = outer.contains(inner2) var z = outer2.contains(inner) var a = outer2.contains(inner2)
reverse
function reverseQuerySelector(element, match = null) { if (element === document.body) { return null; } while (true) { if (element === match) { return element; } if (element.parentNode) { element = element.parentNode; if ( element === document.body ) { return null; } } else { return null; } } } var x = reverseQuerySelector(outer, inner); var y = reverseQuerySelector(outer, inner2); var z = reverseQuerySelector(outer2, inner); var a = reverseQuerySelector(outer2, inner2);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
jQuery.contains()
Node.contains()
reverse

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36

Browser/OS: Chrome 107 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
jQuery.contains()	1111601.0 Ops/sec
Node.contains()	2114198.0 Ops/sec
reverse	616078.2 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its options.

**Benchmark Definition:**

The benchmark measures the performance of three different approaches:

1. **jQuery.contains()**: This function is part of the jQuery library, which provides a convenient way to check if an element contains another element.
2. **Node.contains()**: This function is a native JavaScript method that checks if one node contains another node in its DOM subtree.
3. **Reverse QuerySelector**: This function uses a custom algorithm to find an ancestor element in the DOM tree.

**Pros and Cons:**

1. **jQuery.contains()**:
	* Pros: Convenient and easy to use, provides good performance for simple cases.
	* Cons: Requires jQuery library to be loaded, may introduce additional overhead due to the library's size and complexity.
2. **Node.contains()**:
	* Pros: Native JavaScript method, no external dependencies, efficient for DOM manipulation.
	* Cons: May require more complex code to achieve similar results as jQuery.contains(), can be slower for very large DOMs.
3. **Reverse QuerySelector**:
	* Pros: Custom algorithm provides good performance for finding ancestors in the DOM tree, can be optimized for specific use cases.
	* Cons: Requires custom implementation and optimization, may not be as widely supported or understood as native JavaScript methods.

**Other Considerations:**

* The benchmark uses a complex HTML structure with nested elements to test the performance of each approach. This ensures that the results are representative of real-world scenarios where multiple elements need to be found.
* The benchmark measures the number of executions per second, which provides an idea of the execution speed and scalability of each approach.

**Library:**

The `jQuery` library is a popular JavaScript framework that provides a wide range of utility functions, including DOM manipulation and event handling. In this case, it's used to provide the `contains()` method for checking if an element contains another element.

**Special JS Feature/Syntax:**

There are no special JavaScript features or syntax mentioned in the benchmark code. The focus is on comparing different approaches for finding ancestors in the DOM tree.

**Alternatives:**

Other alternatives for finding ancestors in the DOM tree include:

* Using `querySelectorAll()` with a CSS selector to find all elements that match a certain pattern.
* Implementing a recursive function to traverse the DOM tree and find an ancestor element.
* Using a third-party library like React or Angular, which provide built-in support for DOM manipulation and query selection.

These alternatives may offer different trade-offs in terms of performance, complexity, and ease of use, but they can be useful depending on the specific requirements of your project.

Related benchmarks:

jQuery.contains() vs. Node.contains() vs reverse checking (version: 0)

Comparing performance of: jQuery.contains() vs Node.contains() vs reverse

Created: 2 years ago by: Guest

Jump to the latest result

jQuery.contains()

Node.contains()

reverse

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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