Benchmark: contains2 vs closest2

HTML Preparation code:

<div id='div1'>
  <div id='div2'>
    <div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div>
    <div id='div3'>
    </div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>
  </div>
</div>

Script Preparation code:

var box = document.getElementById('div1')
var clicked = document.getElementById('div3')

Tests:

contains
box.contains(clicked);
closest
const isClickInside = clicked.closest('#div1');

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

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

Browser/OS: Chrome 141 on Windows

View result in a separate tab

Test name	Executions per second
contains	14430460.0 Ops/sec
closest	1815075.4 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested, compared, and the pros and cons of each approach.

**Benchmark Overview**

The benchmark measures the performance difference between two JavaScript methods: `contains` and `closest`. The test case uses HTML elements to simulate a scenario where a user clicks on an element within a container.

**Script Preparation Code**

The script preparation code sets up the necessary variables:
```javascript
var box = document.getElementById('div1');
var clicked = document.getElementById('div3');
```
Here, `box` represents the outermost container (`<div id="div1">`), and `clicked` represents the innermost element (`<div id='div3'>`) that a user clicks on.

**Html Preparation Code**

The HTML preparation code generates the necessary HTML structure:
```html
<div id='div1'>
  <div id='div2'>
    
    <div id='div3'>
    </div>
  </div>
</div>
```
This creates a container with 22 levels of nested `div` elements, where the user clicks on the innermost element (`<div id='div3'>`).

**Individual Test Cases**

There are two test cases:

1. **contains**
```javascript
box.contains(clicked);
```
This method checks if the clicked element is a descendant of the box container. The pros of this approach include:
	* Simplicity: easy to understand and implement.
	* Fast performance: since it's a simple DOM traversal, it's likely to be fast.
However, the cons are:
	* Inefficient for deep nested structures like this benchmark, as it needs to traverse the entire DOM tree.

2. **closest**
```javascript
const isClickInside = clicked.closest('#div1');
```
This method uses the `closest` method (introduced in ECMAScript 2015) to find the closest ancestor that matches the selector `#div1`. The pros of this approach include:
	* Efficient: it only traverses the DOM tree until it finds a match, which can be faster than checking every descendant.
	* Flexible: it allows for more complex selectors, making it useful in scenarios with varying HTML structures.

**Library and Syntax**

The `closest` method is part of the W3C Recommendation, which means it's supported by most modern browsers. The syntax is simple and easy to read.

**Other Alternatives**

For this benchmark, we've only compared two methods:

1. **forEach**: Instead of using `contains` or `closest`, you could use a `forEach` loop to traverse the DOM tree:
```javascript
for (const elem of box.children) {
  if (elem === clicked) return true;
}
```
This approach would be slower than `closest`, as it needs to iterate over every child element.

2. **querySelectorAll**: Another alternative could be using `querySelectorAll` to find all elements that match the selector `#div1`, and then checking if the clicked element is among them:
```javascript
const divs = box.querySelectorAll('#div1');
for (const div of divs) {
  if (div.contains(clicked)) return true;
}
```
This approach would also be slower than `closest`.

In summary, the `closest` method is a good choice for this benchmark due to its efficiency and flexibility. However, depending on the specific use case, other methods like `forEach` or `querySelectorAll` might be suitable alternatives.

Related benchmarks:

contains2 vs closest2 (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):