Benchmark: Closest performance: Class selector vs data attribute selector vs no result

HTML Preparation code:

<div>
    <div>
        <div>
            <div>
                <div class="gtm" data-gtm='test'>
                    <div>
                        <div>
                            <div class="clicked"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script>
    Benchmark.prototype.setup = () => {
        const element = document.querySelector('.clicked');
    };
</script>

Tests:

Class selector
const result = element.closest('.gtm')
Data attribute selector
const result = element.closest('[data-gtm]')
No result
const result = element.closest('[data-gtm-noop]')

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Class selector
Data attribute selector
No result

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 11 months ago)

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

Browser/OS: Opera 119 on Windows

View result in a separate tab

Test name	Executions per second
Class selector	7895339.5 Ops/sec
Data attribute selector	6589316.0 Ops/sec
No result	3295543.5 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview**

The provided JSON represents a JavaScript benchmark test case created on the MeasureThat.net website. The test aims to compare the performance of different approaches for finding an ancestor element in a DOM tree.

**Test Cases**

There are three individual test cases:

1. **Class selector**: `const result = element.closest('.gtm')`
2. **Data attribute selector**: `const result = element.closest('[data-gtm]')`
3. **No result**: `const result = element.closest('[data-gtm-noop]')`

**Options Compared**

The three test cases compare the performance of using a class selector (`element.closest('.gtm')`) versus a data attribute selector (`element.closest('[data-gtm]')`) and an approach that returns no result (`element.closest('[data-gtm-noop]')`).

**Pros and Cons**

* **Class selector**: Pros:
	+ Simple and widely supported.
	+ Fast lookup time (O(1)).
* Cons:
	+ May not work if the element is not found, which can lead to unexpected behavior.
	+ Can be slower for complex DOMs due to the need to traverse the DOM tree.
* **Data attribute selector**: Pros:
	+ More flexible and reusable than class selectors.
	+ Works even if the element is not found.
* Cons:
	+ May be slower due to the need to parse attribute values (O(n)).
	+ Not as widely supported as class selectors.
* **No result**: Pros:
	+ Returns immediately without attempting to find an ancestor, which can improve performance for complex DOMs or when no ancestor is expected.
	+ Avoids potential issues with unexpected behavior if `closest` returns null.
* Cons:
	+ May not be what the developer intended if they want to find an ancestor element.
	+ Can lead to false positives or false negatives in certain use cases.

**Library**

None of the test cases rely on a specific JavaScript library. However, it's worth noting that some browsers may have internal optimizations or polyfills for `closest()` and attribute selectors.

**Special JS Feature/Syntax**

There is no special JavaScript feature or syntax used in this benchmark. The code is straightforward and uses standard JavaScript syntax.

**Other Alternatives**

Some alternative approaches to finding an ancestor element include:

* Using `getElementsByClassName` with a class name that includes the ancestor's class, followed by `document.querySelector`.
* Using attribute selectors with a value of ".*" (i.e., matches any value) or "^=" (i.e., starts with a specific value).
* Using a library like jQuery, which provides its own implementation of `closest()`.

However, these alternatives may have different performance characteristics and trade-offs compared to the test cases provided.

Related benchmarks:

Closest performance: Class selector vs data attribute selector vs no result (version: 1)

Comparing performance of: Class selector vs Data attribute selector vs No result

Created: 2 years ago by: Registered User

Jump to the latest result

Class selector

Data attribute selector

No result

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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