Benchmark: contains vs closest fork

HTML Preparation code:

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

Tests:

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

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: 3 years ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36

Browser/OS: Chrome 95 on Linux

View result in a separate tab

Test name	Executions per second
contains	2040790.4 Ops/sec
closest	1822871.1 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark measures the performance difference between two approaches: `contains` and `closest`. Both methods are used to determine whether an element (`clicked`) is contained within another element (`box`), which is a child of the DOM node with ID "div1".

**Options Compared**

Two options are being compared:

1. **`contains()`**: This method returns `true` if the specified element is contained in the given container, and `false` otherwise.
2. **`closest()`**: This method returns the closest ancestor of the specified element that matches the given selector.

**Pros and Cons of Each Approach**

*   **`contains()`**:
    *   Pros:
        *   More straightforward and easier to understand.
        *   Typically faster, as it only needs to traverse up the DOM tree until it finds the container.
    *   Cons:
        *   Can be slower if the `box` element is very deep in the DOM tree (i.e., many ancestor elements), since the method has to traverse all those ancestors.
*   **`closest()`**:
    *   Pros:
        *   Can be faster when dealing with large, nested DOM structures, as it returns as soon as it finds the first matching ancestor.
        *   More flexible and powerful, as it can handle more complex scenarios (e.g., handling multiple possible closest matches).
    *   Cons:
        *   More complex and less intuitive than `contains()`.
        *   May have additional overhead due to its more involved algorithm.

**Library Used**

The benchmark uses the DOM API, specifically the `document.getElementById()` method to retrieve elements by their IDs. The `closest()` method is also part of this API.

**Special JavaScript Feature/Syntax**

There's no special JavaScript feature or syntax being used in this benchmark beyond standard DOM manipulation and access methods (e.g., `document.getElementById()`, `.contains()`).

**Other Considerations**

When running benchmarks like this, you might want to consider factors such as:

*   Cache effects: How do different caching strategies impact the results?
*   Hardware-specific optimizations: Are there any hardware-related differences that would affect performance?
*   Additional dependencies or libraries: How do additional dependencies (e.g., polyfills) influence benchmark results?

**Alternatives**

If you were to write a similar benchmark, you might consider testing other approaches:

*   **Using query selectors**: Instead of `contains()` and `closest()`, use query selectors like `box.contains(clicked)` and `clicked.closest('#div1')`.
*   **Implementing custom traversal algorithms**: Develop your own traversal algorithms to traverse the DOM tree (e.g., using a recursive approach).

Keep in mind that different benchmarks will have different characteristics, so consider what makes sense for your specific use case.

Related benchmarks:

contains vs closest fork (version: 0)

Comparing performance of: contains vs closest

Created: 3 years ago by: Guest

Jump to the latest result

contains

closest

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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