Benchmark: hasAttribute vs. getAttribute vs. classList.contains

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');

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

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 15 days ago)

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

Browser/OS: Chrome 124 on Windows

View result in a separate tab

Test name	Executions per second
hasAttribute	7835270.0 Ops/sec
getAttribute	8595888.0 Ops/sec
classList	6606602.5 Ops/sec
hasAttribute single	11670426.0 Ops/sec
getAttribute single	7653030.5 Ops/sec
classList single	6298054.5 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 2 months ago):

LLMs can make mistakes. Check important info.

The provided JSON represents a JavaScript benchmarking test case on the MeasureThat.net website. The test is designed to compare the performance of three different approaches for checking if an HTML element has a specific attribute or property:

1. `hasAttribute`
2. `getAttribute` with a comparison operator (`===`)
3. `classList.contains`

**Options Comparison**

The options being compared are:

* `hasAttribute`: checks if an element has a specific attribute using the `hasAttribute()` method.
* `getAttribute`: gets the value of a specific attribute using the `getAttribute()` method and then compares it to `"true"` (or another string) using the equality operator (`===`).
* `classList.contains`: checks if an element contains a specific class name using the `classList.contains()` method.

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

1. `hasAttribute`:
	* Pros: simple, straightforward, and widely supported.
	* Cons: can be slower due to the need to iterate over attributes, especially if there are many.
2. `getAttribute` with comparison operator (`===`):
	* Pros: provides a direct way to check for attribute presence without iteration, but requires manual string comparison, which can be slow.
	* Cons: assumes attribute value is a string, which might not always be the case (e.g., if attribute has a numeric or boolean value).
3. `classList.contains`:
	* Pros: efficient and widely supported, especially in modern browsers.
	* Cons: requires access to the element's class list, which may not always be available or up-to-date.

**Library Usage**

The test uses JavaScript's built-in `Element` interface, which provides methods for working with HTML elements, such as `hasAttribute()`, `getAttribute()`, and `classList.contains()`.

**Special JS Features/Syntax**

There are no special JavaScript features or syntax used in this benchmark. It only relies on standard JavaScript APIs and methods.

**Other Alternatives**

If the test were to be modified to include other approaches, some alternatives could be:

* Using a library like jQuery (which provides similar functionality) or another DOM manipulation library.
* Implementing custom iteration over attributes using `Element.attributes` and iterating over the attribute name-value pairs.
* Comparing attribute values using other comparison operators (e.g., `===`, `!==`, `>=`, `<`, etc.).
* Using CSS classes to check for presence, rather than relying on JavaScript.

Keep in mind that these alternatives would likely change the test's behavior and results.

Related benchmarks:

hasAttribute vs. getAttribute vs. classList.contains (version: 5)

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

Created: 4 years ago by: Registered User

Jump to the latest result

hasAttribute

getAttribute

classList

hasAttribute single

getAttribute single

classList single

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 2 months ago):