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: 8 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

Test name	Executions per second
matches	1467.2 Ops/sec
attr	122049.9 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 8 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.

Related benchmarks:

matches vs hasattribute optional (version: 1)

Comparing performance of: matches vs attr

Created: 8 months ago by: Guest

Jump 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 8 months ago):