Benchmark: Tag vs. :is() using `element.matches`

HTML Preparation code:

<div class="hello" id="hello" data-hello>Hello</div>

Script Preparation code:

const element = document.getElementById("hello");

Tests:

Tag name (div)
element.matches('div');
Tag name with two (div and span)
element.matches('div, span');
:is Selector with only div
element.matches(':is(div)');
:is Selector with div and span
element.matches(':is(div, span)');
:is Selector with div, span and img
element.matches(':is(div, span, img)');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Tag name (div)
Tag name with two (div and span)
:is Selector with only div
:is Selector with div and span
:is Selector with div, span and img

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.2 Safari/605.1.15

Browser/OS: Safari 18 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Tag name (div)	15467067.0 Ops/sec
Tag name with two (div and span)	15555863.0 Ops/sec
:is Selector with only div	13425664.0 Ops/sec
:is Selector with div and span	12418409.0 Ops/sec
:is Selector with div, span and img	11460727.0 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 3 months ago):

LLMs can make mistakes. Check important info.

The benchmark provided focuses on comparing the performance of two approaches to element matching in JavaScript: using a simple tag selector and the newer `:is()` CSS pseudo-class, alongside the `Element.matches` method.

### Benchmark Overview

#### Benchmark Options Compared
1. **Simple Tag Selector**
   - `element.matches('div')`: Checks if the element matches the tag name 'div'.
   - `element.matches('div, span')`: Checks if the element matches either 'div' or 'span'.

2. **`:is()` Selector**
   - `element.matches(':is(div)')`: Checks if the element matches the 'div' tag using the `:is()` pseudo-class.
   - `element.matches(':is(div, span)')`: Checks for matches with 'div' or 'span' using `:is()`.
   - `element.matches(':is(div, span, img)')`: Checks for matches among 'div', 'span', or 'img'.

### Performance Results

The results show the number of executions per second for each test case on Chrome 131 on a Linux desktop environment:

- **Tag name (div)**: 20,577,856 executions/s
- **Tag name with two (div and span)**: 19,437,750 executions/s
- **:is Selector with only div**: 14,127,110 executions/s
- **:is Selector with div and span**: 14,170,054 executions/s
- **:is Selector with div, span, and img**: 14,188,667 executions/s

### Pros and Cons

#### Simple Tag Selectors
**Pros:**
- **Performance:** Generally faster for single tag queries as it is a straightforward check.
- **Simplicity:** Easy to understand and use for simple scenarios.

**Cons:**
- **Limited Flexibility:** Only matches single or simple combinations of tags. Can become unwieldy for multiple conditions.

#### `:is()` Selector
**Pros:**
- **Flexibility:** Can match multiple selectors within a single call, simplifying the code and reducing redundancy.
- **Readability:** Often results in clearer semantics when dealing with multiple potential matches.

**Cons:**
- **Performance Overhead:** Potentially slower than simple tag selectors, especially in cases with many selectors, as seen in the benchmark.

### Other Considerations
- **Compatibility:** The `:is()` pseudo-class is widely supported in modern browsers, making it viable for use. However, older browsers might not support it.
- **Maintenance:** Using `:is()` may make the code easier to maintain when multiple element types need to be selected as the code can be reduced in length and complexity.

### Alternatives
- **Using `querySelector` or `querySelectorAll`:** These methods can also be utilized for similar matching capabilities and can also leverage `:is()`. Performance may vary.
- **CSS Classes:** Instead of element types, using class selectors is a common practice. This method may yield different performance results based on how the classes are structured and applied.
- **Selectors in CSS:** When feasible, delegating matching responsibilities to CSS, where possible, can streamline JavaScript logic by allowing styles to dictate visibility rather than explicit checks within JavaScript.

In summary, the benchmark provides insights into the performance differences between straightforward tag matching and the `:is()` selector in a JavaScript context. As developers evaluate which method to use, balancing performance, readability, and maintainability will be crucial.

Related benchmarks:

Tag vs. :is() using `element.matches` (version: 1)

Comparing performance of: Tag name (div) vs Tag name with two (div and span) vs :is Selector with only div vs :is Selector with div and span vs :is Selector with div, span and img

Created: 3 months ago by: Guest

Jump to the latest result

Tag name (div)

Tag name with two (div and span)

:is Selector with only div

:is Selector with div and span

:is Selector with div, span and img

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 3 months ago):