Benchmark: Tag vs. :is() - MeasureThat.net

HTML Preparation code:

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

Tests:

Tag name (div)
document.querySelector('div');
Tag name with two (div and span)
document.querySelector('div, span');
:is Selector with only div
document.querySelector(':is(div)');
:is Selector with div and span
document.querySelector(':is(div, span)');
:is Selector with div, span and img
document.querySelector(':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 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Linux

View result in a separate tab

Test name	Executions per second
Tag name (div)	11722607.0 Ops/sec
Tag name with two (div and span)	3217331.8 Ops/sec
:is Selector with only div	3202730.2 Ops/sec
:is Selector with div and span	2928209.8 Ops/sec
:is Selector with div, span and img	2477337.5 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark described focuses on comparing the performance of different CSS selectors used within the `document.querySelector` method in JavaScript. Specifically, it compares the traditional tag name selection against the modern `:is()` pseudo-class selector, which simplifies multi-selector queries.

### Tested Options:

1. **Tag Name Selection**:
   - **Test Case**: `document.querySelector('div');`
   - **Test Name**: **Tag name (div)**
   - **Description**: Retrieves the first `<div>` element in the document.
  
2. **Multiple Tag Name Selection**:
   - **Test Case**: `document.querySelector('div, span');`
   - **Test Name**: **Tag name with two (div and span)**
   - **Description**: Retrieves the first `<div>` or `<span>` element in the document.
  
3. **:is() Selector with Single Element**:
   - **Test Case**: `document.querySelector(':is(div)');`
   - **Test Name**: **:is Selector with only div**
   - **Description**: Retrieves the first `<div>` element, using the `:is()` selector.
  
4. **:is() Selector with Two Elements**:
   - **Test Case**: `document.querySelector(':is(div, span)');`
   - **Test Name**: **:is Selector with div and span**
   - **Description**: Retrieves the first element that is either a `<div>` or `<span>`.

5. **:is() Selector with Multiple Elements**:
   - **Test Case**: `document.querySelector(':is(div, span, img)');`
   - **Test Name**: **:is Selector with div, span and img**
   - **Description**: Retrieves the first element that is a `<div>`, `<span>`, or `<img>`.

### Performance Results:

- The results show the number of executions per second (measure of performance efficiency) for each test, with the `document.querySelector('div');` being significantly faster (over 11 million executions per second) than the other tests, which perform in the millions or lower.

### Pros and Cons:

1. **Traditional Tag Name Selection**:
   - **Pros**:
     - Fastest option when selecting a single type of element.
     - Simple and straightforward syntax.
   - **Cons**:
     - Limited to selecting a specific type only; cannot handle multiple types elegantly.
  
2. **Multiple Tag Name Selection (Using Comma)**:
   - **Pros**:
     - Allows selecting multiple types of elements in one query.
   - **Cons**:
     - Performance drops significantly compared to single tag selection (over 75% slower than single tag).
  
3. **:is() Selector**:
   - **Pros**:
     - Simplifies complex queries by allowing a list of multiple selectors.
     - Can enhance readability of the code.
   - **Cons**:
     - Performance is generally poorer than straightforward tag name selection.
     - Could introduce overhead, especially if used excessively for a high volume of selections.

### Other Considerations:

- **Browser Compatibility**: While the `:is()` selector is supported in modern browsers, it's essential to ensure that older browsers being targeted also support this feature.
  
### Alternatives:

1. **Using CSS Class Selectors**: Instead of relying solely on tag names or pseudo-classes, using specific classes (e.g., `.my-class`) helps target elements that need to be manipulated, providing clarity and performance.
  
2. **Attribute Selectors**: If selecting elements based on attributes (e.g., `data-hello`), using attribute selectors (e.g., `[data-hello]`) can be efficient in selecting specific elements.

3. **Caching Selection Results**: If repetitive selections are required, consider caching results (storing results in variables) to prevent repeated DOM queries, hence improving observed performance in practical applications.

In conclusion, this benchmark showcases the performance differences between traditional CSS selectors and modern approaches using `:is()`, providing essential insights for developers to choose efficient methods for interacting with the DOM.

Related benchmarks:

Tag vs. :is() (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):