Benchmark: hasAttribute vs. getAttribute vs. classList.contains vs. className vs. tagName

HTML Preparation code:

<div id="foo" class="foo bar buz ignore" style="display:block" width="500" height="600" title="TEST" is-ignore="true" ignore></div>
<div id="bar" ignore></div>
<div id="buz" is-ignore="true"></div>
<div id="foobar" class="foo ignore"></div>

Tests:

hasAttribute
var element = document.getElementById("foo"); var isIgnored = element.hasAttribute('ignore');
getAttribute
var element = document.getElementById("foo"); var isIgnored = element.getAttribute('is-ignore') === "true";
classList
var element = document.getElementById("foo"); var isIgnored = element.classList.contains('ignore');
hasAttribute single
var element = document.getElementById("bar"); var isIgnored = element.hasAttributes('ignore');
getAttribute single
var element = document.getElementById("buz"); var isIgnored = element.getAttribute('is-ignore') === "true";
classList single
var element = document.getElementById("foobar"); var isIgnored = element.classList.contains('ignore');
className
var element = document.getElementById("foobar"); var isIgnored = element.className==='foo bar buz ignore';
tagName
var element = document.getElementById("foobar"); var isIgnored = element.tagName==='DIV';

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
hasAttribute
getAttribute
classList
hasAttribute single
getAttribute single
classList single
className
tagName

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month ago)

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

Browser/OS: Chrome 109 on Windows

View result in a separate tab

Test name	Executions per second
hasAttribute	6632098.5 Ops/sec
getAttribute	6196777.5 Ops/sec
classList	5114788.0 Ops/sec
hasAttribute single	10699137.0 Ops/sec
getAttribute single	6492219.0 Ops/sec
classList single	5155564.5 Ops/sec
className	10223679.0 Ops/sec
tagName	8157088.0 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one month ago):

LLMs can make mistakes. Check important info.

The benchmark JSON provided examines the performance of various methods used to ascertain the presence of attributes or classes in HTML elements. The fundamental goal is to identify which approach can check for attributes, class names, or element tags more efficiently, mainly focusing on execution speed (executions per second).

### Benchmarked Methods

1. **`hasAttribute`**:
   - **Usage**: `element.hasAttribute('ignore');`
   - **Purpose**: Checks if an element has a specific attribute. 
   - **Pros**:
     - Directly checks for the existence of an attribute, which can be efficient.
   - **Cons**:
     - If not used correctly or on a large number of attributes, it may become less performant due to the overhead of DOM operations.

2. **`getAttribute`**:
   - **Usage**: `element.getAttribute('is-ignore') === "true";`
   - **Purpose**: Retrieves the value of a specified attribute. This example checks if an attribute contains a certain value.
   - **Pros**:
     - Allows retrieval of the attribute’s value, which can be useful if the value matters.
   - **Cons**:
     - Slightly slower than `hasAttribute` because it fetches the attribute's value instead of just checking existence.

3. **`classList.contains`**:
   - **Usage**: `element.classList.contains('ignore');`
   - **Purpose**: Checks if a specific class is present in the class list of an element.
   - **Pros**:
     - More straightforward and efficient for class checking. It involves less overhead since `classList` is optimized for class manipulations.
   - **Cons**:
     - Limited to checking classes, and cannot be used for attributes other than class names.

4. **`className`**:
   - **Usage**: `element.className==='foo bar buz ignore';`
   - **Purpose**: Compares the entire class string.
   - **Pros**:
     - Allows full access to the classes, but entails checking an entire string.
   - **Cons**:
     - Less efficient than `classList.contains` because it requires a complete string comparison. If classes change dynamically, this could lead to errors.

5. **`tagName`**:
   - **Usage**: `element.tagName==='DIV';`
   - **Purpose**: Checks the name of the tag of the element.
   - **Pros**:
     - Very fast and reliable for type checking of elements.
   - **Cons**:
     - Not useful for attribute or class manipulations, thus limited in context.

### Comparison of Results

From the benchmark results provided, the `hasAttribute single` method performed the best, achieving approximately 2.78 million executions per second. This reflects its efficiency in checking for the existence of an attribute without needing to fetch its value. Following closely was `className`, which also showed high performance, demonstrating that checking the entire class string can still be efficient under some conditions.

### Alternatives or Additional Considerations

1. **Using jQuery or Other Libraries**: jQuery offers methods such as `.hasClass()` or `.attr()` that can simplify checks, but they often introduce additional overhead since they need to work on many browsers with different DOM implementations.
   
2. **Using Custom Data Attributes**: Instead of using standard attributes, developers can create and utilize HTML5 data attributes (e.g., `data-ignore="true"`). While this approach may require additional parsing, it can be more extensible and semantically meaningful.

3. **Performance Trade-offs**: In choosing an approach, developers must consider performance not just in isolation but also in the context of user experience and maintenance. While a method might be faster for single checks, if larger batch processing is common in the application, that might shift the choice.

4. **Native vs. Library Methods**: Native DOM methods like those tested typically perform better than methods provided by libraries, as the latter adds abstraction and may involve more function calls.

### Conclusion

This benchmark highlights the comparative speed of various methods for checking attributes and classes within the DOM, encouraging developers to select appropriate methods based on their specific needs in performance-critical applications. Understanding these nuances helps in making informed decisions about DOM manipulation in JavaScript-heavy applications.

Related benchmarks:

hasAttribute vs. getAttribute vs. classList.contains vs. className vs. tagName (version: 1)

Comparing performance of: hasAttribute vs getAttribute vs classList vs hasAttribute single vs getAttribute single vs classList single vs className vs tagName

Created: one month ago by: Guest

Jump to the latest result

hasAttribute

getAttribute

classList

hasAttribute single

getAttribute single

classList single

className

tagName

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one month ago):