Benchmark: Node closest vs node contains

HTML Preparation code:

<div class="parent">
  <div class="child">
	</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')

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Contains
Closest

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 130 on Windows

View result in a separate tab

Test name	Executions per second
Contains	13276707.0 Ops/sec
Closest	13234811.0 Ops/sec

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

LLMs can make mistakes. Check important info.

The provided benchmark measures the performance difference between two approaches to determine if an HTML element is contained within another.

**What's being tested:**

Two test cases are being compared:

1. `Contains`: This method checks if one element (`child`) contains another element (`parent`). It returns a boolean value indicating whether the `child` element is inside the `parent` element.
2. `Closest`: This method finds the closest ancestor of an element that matches a given selector. In this case, it's finding the closest ancestor of the `child` element that has a class attribute with the value `'parent'`.

**Options being compared:**

The two approaches are:

1. `contains()`: A built-in JavaScript method that checks if one element contains another.
2. `closest()` (or `.closest()`): A method provided by the jQuery library, which is not used in this benchmark, but we'll discuss it later.

**Pros and Cons of each approach:**

1. `contains()`:
	* Pros: Simple to implement, widely supported across browsers, and efficient.
	* Cons: May return false positives if the containing element has other elements with the same class attribute value, leading to unnecessary iterations.
2. `.closest()` (not used in this benchmark):
	* Pros: Can be more efficient than `contains()` when dealing with multiple classes or attributes.
	* Cons: Requires jQuery library, which is not included in this benchmark.

**Library usage:**

In the provided benchmark, there is no explicit mention of using a JavaScript library like jQuery. However, the `.closest()` method is mentioned, which implies that the benchmark might have used jQuery in its initial version or in other benchmarks. If the `closest()` method was being tested with a real-world use case, it would likely be more efficient than `contains()`. But since it's not implemented here, we can only analyze the theoretical approach.

**Other considerations:**

* The benchmark uses a simple HTML structure to test the performance difference between these two methods. In a real-world scenario, you might need to consider more complex scenarios, such as multiple nested elements or varying element sizes.
* The `executionsPerSecond` metric provides insight into the performance difference between these two approaches.

**Alternative approaches:**

If you were to write your own implementation of either method, here's how you could do it:

1. `contains()` equivalent:
```javascript
function contains(element, parent) {
  while (parent && !parent.contains(element)) {
    parent = parent.parentNode;
  }
  return parent === element.parentNode;
}
```
2. `.closest()` equivalent (if using jQuery):
```javascript
function closest(element, selector) {
  return $(element).closest(selector);
}
```

Keep in mind that these implementations are simplified and might not be as efficient or reliable as the built-in `contains()` method.

In summary, the benchmark measures the performance difference between two approaches to determine if an HTML element is contained within another. The `contains()` approach is widely supported and simple to implement, while `.closest()` (not used in this benchmark) can be more efficient but requires a library like jQuery.

Related benchmarks:

Node closest vs node contains (version: 0)

Comparing performance of: Contains vs Closest

Created: 4 years ago by: Guest

Jump to the latest result

Contains

Closest

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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