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')

Historical Performance Data aggregated from 38 community runs

Desktop Results:

Chrome 28 runs

Closest

9.7M/s

Contains

9.5M/s

View exact numbers

✓ Closest: 9,652,506 ops/sec
• Contains: 9,494,089 ops/sec

Firefox 10 runs

Contains

40.4M/s

Closest

6.9M/s

Fastest: Contains (5.9x faster)

View exact numbers

✓ Contains: 40,389,168 ops/sec
• Closest: 6,890,707 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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: 2 months ago)

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

Browser/OS: Chrome 150 on Windows

View result in a separate tab

Contains

42.9M/s

Closest

10.4M/s

View exact numbers

Test name	Executions per second
✓ Contains	42,902,620 Ops/sec
Closest	10,354,573 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.

Node closest vs node contains (version: 0) Benchmark.js

Comparing performance of: `Contains vs Closest`

Created: 4 years ago by: Guest

Go to the latest result

Contains

Closest

Historical Performance Data aggregated from 38 community runs

Desktop Results:

Chrome 28 runs

Firefox 10 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Node closest vs node contains (version: 0) Benchmark.js

Comparing performance of: Contains vs Closest

Created: 4 years ago by: Guest

Go to the latest result

Contains

Closest

Historical Performance Data aggregated from 38 community runs

Desktop Results:

Chrome 28 runs

Firefox 10 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `Contains vs Closest`