Benchmark: matches vs hasattribute optional

HTML Preparation code:

<div id="foo" data-foo="foo_id"></div>

Tests:

matches
var element = document.getElementById("foo"); var i = 10000; while (i--) { var foo = element?.matches("[data-foo]"); }
attr
var element = document.getElementById("foo"); var i = 10000; while (i--) { var foo = element?.hasAttribute("data-foo"); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
matches
attr

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; rv:143.0) Gecko/20100101 Firefox/143.0

Browser/OS: Firefox 143 on Windows

View result in a separate tab

attr

122K/s

matches

1K/s

View exact numbers

Test name	Executions per second
✓ attr	122,050 Ops/sec
matches	1,467 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark tested on MeasureThat.net compares two methods for checking the existence of a specific attribute on a DOM element: `Element.matches()` and `Element.hasAttribute()`. Here's a detailed explanation of each approach, along with their respective pros and cons and alternative methods.

### Test Cases

1. **matches**
   - **Code Snippet**: 
     ```javascript
     var element = document.getElementById("foo");
     var i = 10000;
     while (i--) {
         var foo = element?.matches("[data-foo]");
     }
     ```
   - **Purpose**: This method checks if the element matches a specific CSS selector. In this case, the selector is `[data-foo]`, which means it verifies whether the element has a `data-foo` attribute.

2. **hasAttribute**
   - **Code Snippet**: 
     ```javascript
     var element = document.getElementById("foo");
     var i = 10000;
     while (i--) {
         var foo = element?.hasAttribute("data-foo");
     }
     ```
   - **Purpose**: This method directly checks if the specified attribute (`data-foo`) exists on the element.

### Performance Results

The results of the latest benchmark show:
- `hasAttribute`: Approximately **122,049** executions per second.
- `matches`: Approximately **1,467** executions per second.

### Pros and Cons

#### `Element.matches()`
- **Pros**:
  - Versatile: Can check multiple conditions and is useful with complex selectors.
  - Allows for CSS rules, making it adaptable for situations where styling is conditional on attributes.
  
- **Cons**:
  - Performance: As demonstrated in the benchmark, it is significantly slower than `hasAttribute()`, likely due to the complexity of parsing the CSS selector.
  - Overhead: More computational overhead is introduced when using CSS parsing mechanisms.

#### `Element.hasAttribute()`
- **Pros**:
  - Performance: Much faster, as indicated by the benchmark results.
  - Simplicity: Directly checks for an attribute's existence with less processing overhead.
  
- **Cons**:
  - Limited: Can only check for the presence of an attribute; it does not evaluate complex conditions or selectors.
  
### Other Considerations

1. **Use Cases**:
   - Use `hasAttribute()` when you simply want to know if an attribute exists.
   - Use `matches()` when you need to evaluate the element against more complex conditions or combinations of attributes.

2. **Browser Support**:
   - Both methods are widely supported in modern browsers, but older browsers may have inconsistencies, particularly with complex CSS selectors.

### Alternatives

- **Direct Property Check**: Instead of using `hasAttribute()`, you can check the attribute directly:
  ```javascript
  var fooExists = element.dataset.foo !== undefined; 
  ```
  This can be slightly faster and provides the same functionality for data attributes, but it requires knowing the attribute's naming conventions in advance (e.g., `data-foo` becomes `dataset.foo`).

- **getAttribute()**: You can use `element.getAttribute("data-foo") !== null` to check for attribute existence, but this is typically less efficient than `hasAttribute()`.

In summary, this benchmark effectively compares two means of attribute presence checking, providing insights into performance differences and guiding developers in choosing the appropriate method based on their specific needs.

matches vs hasattribute optional (version: 1)

Comparing performance of: `matches vs attr`

Created: 11 months ago by: Guest

Go to the latest result

matches

attr

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

matches vs hasattribute optional (version: 1)

Comparing performance of: matches vs attr

Created: 11 months ago by: Guest

Go to the latest result

matches

attr

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `matches vs attr`