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

Historical Performance Data aggregated from 42 community runs

Desktop Results:

Chrome 33 runs

hasAttribute single

10.9M/s

getAttribute single

8.9M/s

getAttribute

8.8M/s

hasAttribute

8.6M/s

classList single

7.9M/s

classList

7.9M/s

Fastest: hasAttribute single (1.4x faster)

View exact numbers

✓ hasAttribute single: 10,868,505 ops/sec
• getAttribute single: 8,891,682 ops/sec
• getAttribute: 8,766,456 ops/sec
• hasAttribute: 8,615,559 ops/sec
• classList single: 7,914,254 ops/sec
• classList: 7,901,960 ops/sec

Firefox 9 runs

hasAttribute

6.2M/s

classList single

5.1M/s

hasAttribute single

5.0M/s

getAttribute single

5.0M/s

classList

4.6M/s

getAttribute

3.8M/s

Fastest: hasAttribute (1.6x faster)

View exact numbers

✓ hasAttribute: 6,228,246 ops/sec
• classList single: 5,070,446 ops/sec
• hasAttribute single: 5,016,304 ops/sec
• getAttribute single: 4,964,732 ops/sec
• classList: 4,611,404 ops/sec
• getAttribute: 3,814,051 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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

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

Browser/OS: Chrome 146 on Windows

View result in a separate tab

hasAttribute single

33.2M/s

hasAttribute

19.8M/s

getAttribute single

19.1M/s

getAttribute

18.4M/s

classList single

17.9M/s

classList

17.5M/s

View exact numbers

Test name	Executions per second
✓ hasAttribute single	33,201,924 Ops/sec
hasAttribute	19,811,070 Ops/sec
getAttribute single	19,131,410 Ops/sec
getAttribute	18,429,714 Ops/sec
classList single	17,932,164 Ops/sec
classList	17,511,880 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year 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.

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: 6 years ago by: Registered User

Go to the latest result

hasAttribute

getAttribute

classList

hasAttribute single

getAttribute single

classList single

Historical Performance Data aggregated from 42 community runs

Desktop Results:

Chrome 33 runs

Firefox 9 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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: 6 years ago by: Registered User

Go to the latest result

hasAttribute

getAttribute

classList

hasAttribute single

getAttribute single

classList single

Historical Performance Data aggregated from 42 community runs

Desktop Results:

Chrome 33 runs

Firefox 9 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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