Benchmark: classList.contains() vs closest() performance

HTML Preparation code:

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

Script Preparation code:

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

Tests:

contains
return box.contains(clicked);
closest
return 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: one month ago)

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

Browser/OS: Chrome 146 on Windows

View result in a separate tab

Test name	Executions per second
contains	16756109.0 Ops/sec
closest	4547199.5 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 is being tested.

**What is being tested?**

The test case measures the performance difference between two methods:

1. `classList.contains()`: This method checks if an element with a given class name exists in the element's class list.
2. `closest()` (which seems to be a custom or library-based implementation of `closest()`): This method finds the closest ancestor element matching a certain selector.

**Options compared**

The two methods are being compared, and their performance is measured under different scenarios.

**Pros and Cons of each approach:**

1. **`classList.contains()`**:
	* Pros:
		+ Simple and widely supported by modern browsers.
		+ Fast and efficient for most cases.
	* Cons:
		+ May not work well with older browsers or non-standard class names.
2. **`closest()`** (library-based implementation):
	* Pros:
		+ Can be more flexible than `classList.contains()`, as it can handle complex ancestor relationships.
	* Cons:
		+ Requires a library or custom implementation, which may add overhead and complexity.

**Library used:**

The `closest()` method is likely using the `querySelector` API with a custom selector (e.g., `.div1 ~ .div2 .div3`). However, without more information, it's difficult to pinpoint the exact library being used.

**Special JS feature/syntax:**

There doesn't appear to be any special JavaScript features or syntax being utilized in this benchmark.

**Other alternatives:**

In addition to `classList.contains()` and `closest()`, other methods for finding closest ancestors or checking class existence might include:

* Using `querySelector` with a more complex selector (e.g., `.div1 ~ .div2 .div3`)
* Utilizing a library like jQuery's `.closest()` method
* Implementing a custom algorithm using event delegation or MutationObserver

**Benchmark preparation code and HTML**

The provided `Script Preparation Code` and `Html Preparation Code` are used to create the test environment:

```javascript
var box = document.querySelector('.div1')
var clicked = document.querySelector('.div3')
```

```html
<div class='div1'>
  <div class='div2'>
    <div class='div3'>
    </div>
  </div>
</div>
```

These create a simple HTML structure with three div elements, where `box` is the first-level container and `clicked` is the second-level child.

Related benchmarks:

classList.contains() vs closest() performance (version: 0)

imitating click

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