Benchmark: contains vs closest (actually working benchmark)

HTML Preparation code:

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

Script Preparation code:

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

Tests:

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

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

contains

42.7M/s

closest

14.2M/s

Fastest: contains (3.0x faster)

View exact numbers

✓ contains: 42,748,464 ops/sec
• closest: 14,150,972 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: one year ago)

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

Browser/OS: Chrome 138 on Mac OS X 10.15.7

View result in a separate tab

contains

68.9M/s

closest

22.9M/s

View exact numbers

Test name	Executions per second
✓ contains	68,930,448 Ops/sec
closest	22,883,744 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what's being tested in this JavaScript microbenchmark.

The benchmark is comparing the performance of two approaches to check if an element (`clicked`) is inside another element (`box`):

1. **Contains Method (`isClickInside = box.contains(clicked)`)**: This method checks if `clicked` is a direct child or descendant of `box`. It returns `true` if `clicked` is contained within `box`, and `false` otherwise.
2. **Closest Method (`isClickInside = clicked.closest('#div1')`)**: This method finds the closest ancestor of `clicked` that matches the selector `#div1`. If no match is found, it returns `null`.

Now, let's discuss the pros and cons of each approach:

**Contains Method**

Pros:

* Simple and straightforward implementation.
* Fast lookup time since it only checks if `clicked` is a descendant of `box`.
* Works for cases where `clicked` is not directly inside `box`, but is a nested descendant.

Cons:

* May perform unnecessary checks on elements that are not relevant to the search (e.g., checking descendants that are far away from `clicked`).
* Can be slower if `box` has many children, since it needs to traverse down the DOM tree.

**Closest Method**

Pros:

* More flexible and efficient than the contains method when dealing with nested layouts or complex DOM structures.
* Returns the closest ancestor element that matches the selector, which can be useful in certain scenarios.

Cons:

* Requires jQuery (or a similar library) to work, since `closest` is not a built-in JavaScript method.
* May perform unnecessary checks on elements that are not relevant to the search.

**Library Considerations**

In this benchmark, it appears that the contains method uses the built-in `contains` method of HTML elements, while the closest method relies on the jQuery library's `closest` method. The jQuery library provides a convenient way to perform element queries and traversal in complex DOM structures.

**Special JS Feature/Syntax**

There are no special JavaScript features or syntax used in this benchmark that would require additional explanation.

**Alternatives**

If you're interested in alternative approaches, here are a few:

* **QuerySelector**: Some browsers (e.g., Chrome) support the `querySelector` method on HTML elements, which can be used to find an ancestor element that matches a selector. However, this is not as widely supported as jQuery's `closest` method.
* **DOM Traversal**: You could write your own implementation of DOM traversal using loops and recursive function calls to search for the closest ancestor element. This approach would require more code and may be less efficient than using an established library like jQuery.

In summary, this benchmark compares two approaches to check if an element is inside another element: the contains method (built-in JavaScript) and the closest method (jQuery library). The pros and cons of each approach are discussed, along with considerations for libraries and special JavaScript features.

contains vs closest (actually working benchmark) (version: 0)

Comparing performance of: `contains vs closest`

Created: 4 years ago by: Guest

Go to the latest result

contains

closest

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

contains vs closest (actually working benchmark) (version: 0)

Comparing performance of: contains vs closest

Created: 4 years ago by: Guest

Go to the latest result

contains

closest

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 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`