Benchmark: classList.contains vs. hasAttribute v2

classList.contains vs. hasAttribute v2 (version: 1)

Comparing performance of: hasAttribute attr2_cls2 first vs classList attr2_cls2 first vs hasAttribute attr3_cls3 first vs classList attr3_cls3 first vs hasAttribute attr4_cls4 first vs classList attr4_cls4 first vs hasAttribute attr5_cls5 first vs classList attr5_cls5 first vs hasAttribute attr6_cls6 first vs classList attr6_cls6 first vs hasAttribute attr7_cls7 first vs classList attr7_cls7 first vs hasAttribute attr8_cls8 first vs classList attr8_cls8 first vs hasAttribute attr9_cls9 first vs classList attr9_cls9 first vs hasAttribute attr10_cls10 first vs classList attr10_cls10 first vs hasAttribute attr11_cls11 first vs classList attr11_cls11 first vs hasAttribute attr12_cls12 first vs classList attr12_cls12 first vs hasAttribute attr13_cls13 first vs classList attr13_cls13 first vs hasAttribute attr14_cls14 first vs classList attr14_cls14 first vs hasAttribute attr15_cls15 first vs classList attr15_cls15 first vs hasAttribute attr16_cls16 first vs classList attr16_cls16 first vs hasAttribute attr17_cls17 first vs classList attr17_cls17 first vs hasAttribute attr18_cls18 first vs classList attr18_cls18 first vs hasAttribute attr19_cls19 first vs classList attr19_cls19 first vs hasAttribute attr20_cls20 first vs classList attr20_cls20 first vs hasAttribute attr2_cls2 last vs classList attr2_cls2 last vs hasAttribute attr3_cls3 last vs classList attr3_cls3 last vs hasAttribute attr4_cls4 last vs classList attr4_cls4 last vs hasAttribute attr5_cls5 last vs classList attr5_cls5 last vs hasAttribute attr6_cls6 last vs classList attr6_cls6 last vs hasAttribute attr7_cls7 last vs classList attr7_cls7 last vs hasAttribute attr8_cls8 last vs classList attr8_cls8 last vs hasAttribute attr9_cls9 last vs classList attr9_cls9 last vs hasAttribute attr10_cls10 last vs classList attr10_cls10 last vs hasAttribute attr11_cls11 last vs classList attr11_cls11 last vs hasAttribute attr12_cls12 last vs classList attr12_cls12 last vs hasAttribute attr13_cls13 last vs classList attr13_cls13 last vs hasAttribute attr14_cls14 last vs classList attr14_cls14 last vs hasAttribute attr15_cls15 last vs classList attr15_cls15 last vs hasAttribute attr16_cls16 last vs classList attr16_cls16 last vs hasAttribute attr17_cls17 last vs classList attr17_cls17 last vs hasAttribute attr18_cls18 last vs classList attr18_cls18 last vs hasAttribute attr19_cls19 last vs classList attr19_cls19 last vs hasAttribute attr20_cls20 last vs classList attr20_cls20 last

Created: one month ago by: Registered User

Jump to the latest result

HTML Preparation code:

<div id="attr2_cls2" class="bar baz"></div>
<div id="attr3_cls3" class="bar baz a" a="a"></div>
<div id="attr4_cls4" class="bar baz a b" a="a" b="b"></div>
<div id="attr5_cls5" class="bar baz a b c" a="a" b="b" c="c"></div>
<div id="attr6_cls6" class="bar baz a b c d" a="a" b="b" c="c" d="d"></div>
<div id="attr7_cls7" class="bar baz a b c d e" a="a" b="b" c="c" d="d" e="e"></div>
<div id="attr8_cls8" class="bar baz a b c d e f" a="a" b="b" c="c" d="d" e="e" f="f"></div>
<div id="attr9_cls9" class="bar baz a b c d e f g" a="a" b="b" c="c" d="d" e="e" f="f" g="g"></div>
<div id="attr10_cls10" class="bar baz a b c d e f g h" a="a" b="b" c="c" d="d" e="e" f="f" g="g" h="h"></div>
<div id="attr11_cls11" class="bar baz a b c d e f g h i" a="a" b="b" c="c" d="d" e="e" f="f" g="g" h="h" i="i"></div>
<div id="attr12_cls12" class="bar baz a b c d e f g h i j" a="a" b="b" c="c" d="d" e="e" f="f" g="g" h="h" i="i" j="j"></div>
<div id="attr13_cls13" class="bar baz a b c d e f g h i j k" a="a" b="b" c="c" d="d" e="e" f="f" g="g" h="h" i="i" j="j" k="k"></div>
<div id="attr14_cls14" class="bar baz a b c d e f g h i j k l" a="a" b="b" c="c" d="d" e="e" f="f" g="g" h="h" i="i" j="j" k="k" l="l"></div>
<div id="attr15_cls15" class="bar baz a b c d e f g h i j k l m" a="a" b="b" c="c" d="d" e="e" f="f" g="g" h="h" i="i" j="j" k="k" l="l" m="m"></div>
<div id="attr16_cls16" class="bar baz a b c d e f g h i j k l m n" a="a" b="b" c="c" d="d" e="e" f="f" g="g" h="h" i="i" j="j" k="k" l="l" m="m" n="n"></div>
<div id="attr17_cls17" class="bar baz a b c d e f g h i j k l m n o" a="a" b="b" c="c" d="d" e="e" f="f" g="g" h="h" i="i" j="j" k="k" l="l" m="m" n="n" o="o"></div>
<div id="attr18_cls18" class="bar baz a b c d e f g h i j k l m n o p" a="a" b="b" c="c" d="d" e="e" f="f" g="g" h="h" i="i" j="j" k="k" l="l" m="m" n="n" o="o" p="p"></div>
<div id="attr19_cls19" class="bar baz a b c d e f g h i j k l m n o p q" a="a" b="b" c="c" d="d" e="e" f="f" g="g" h="h" i="i" j="j" k="k" l="l" m="m" n="n" o="o" p="p" q="q"></div>
<div id="attr20_cls20" class="bar baz a b c d e f g h i j k l m n o p q r" a="a" b="b" c="c" d="d" e="e" f="f" g="g" h="h" i="i" j="j" k="k" l="l" m="m" n="n" o="o" p="p" q="q" r="r"></div>

Script Preparation code:

const attr2_cls2 = document.getElementById("attr2_cls2");
const attr3_cls3 = document.getElementById("attr3_cls3");
const attr4_cls4 = document.getElementById("attr4_cls4");
const attr5_cls5 = document.getElementById("attr5_cls5");
const attr6_cls6 = document.getElementById("attr6_cls6");
const attr7_cls7 = document.getElementById("attr7_cls7");
const attr8_cls8 = document.getElementById("attr8_cls8");
const attr9_cls9 = document.getElementById("attr9_cls9");
const attr10_cls10 = document.getElementById("attr10_cls10");
const attr11_cls11 = document.getElementById("attr11_cls11");
const attr12_cls12 = document.getElementById("attr12_cls12");
const attr13_cls13 = document.getElementById("attr13_cls13");
const attr14_cls14 = document.getElementById("attr14_cls14");
const attr15_cls15 = document.getElementById("attr15_cls15");
const attr16_cls16 = document.getElementById("attr16_cls16");
const attr17_cls17 = document.getElementById("attr17_cls17");
const attr18_cls18 = document.getElementById("attr18_cls18");
const attr19_cls19 = document.getElementById("attr19_cls19");
const attr20_cls20 = document.getElementById("attr20_cls20");

Tests:

hasAttribute attr2_cls2 first
attr2_cls2.hasAttribute("id");
classList attr2_cls2 first
attr2_cls2.classList.contains("bar");
hasAttribute attr3_cls3 first
attr3_cls3.hasAttribute("id");
classList attr3_cls3 first
attr3_cls3.classList.contains("bar");
hasAttribute attr4_cls4 first
attr4_cls4.hasAttribute("id");
classList attr4_cls4 first
attr4_cls4.classList.contains("bar");
hasAttribute attr5_cls5 first
attr5_cls5.hasAttribute("id");
classList attr5_cls5 first
attr5_cls5.classList.contains("bar");
hasAttribute attr6_cls6 first
attr6_cls6.hasAttribute("id");
classList attr6_cls6 first
attr6_cls6.classList.contains("bar");
hasAttribute attr7_cls7 first
attr7_cls7.hasAttribute("id");
classList attr7_cls7 first
attr7_cls7.classList.contains("bar");
hasAttribute attr8_cls8 first
attr8_cls8.hasAttribute("id");
classList attr8_cls8 first
attr8_cls8.classList.contains("bar");
hasAttribute attr9_cls9 first
attr9_cls9.hasAttribute("id");
classList attr9_cls9 first
attr9_cls9.classList.contains("bar");
hasAttribute attr10_cls10 first
attr10_cls10.hasAttribute("id");
classList attr10_cls10 first
attr10_cls10.classList.contains("bar");
hasAttribute attr11_cls11 first
attr11_cls11.hasAttribute("id");
classList attr11_cls11 first
attr11_cls11.classList.contains("bar");
hasAttribute attr12_cls12 first
attr12_cls12.hasAttribute("id");
classList attr12_cls12 first
attr12_cls12.classList.contains("bar");
hasAttribute attr13_cls13 first
attr13_cls13.hasAttribute("id");
classList attr13_cls13 first
attr13_cls13.classList.contains("bar");
hasAttribute attr14_cls14 first
attr14_cls14.hasAttribute("id");
classList attr14_cls14 first
attr14_cls14.classList.contains("bar");
hasAttribute attr15_cls15 first
attr15_cls15.hasAttribute("id");
classList attr15_cls15 first
attr15_cls15.classList.contains("bar");
hasAttribute attr16_cls16 first
attr16_cls16.hasAttribute("id");
classList attr16_cls16 first
attr16_cls16.classList.contains("bar");
hasAttribute attr17_cls17 first
attr17_cls17.hasAttribute("id");
classList attr17_cls17 first
attr17_cls17.classList.contains("bar");
hasAttribute attr18_cls18 first
attr18_cls18.hasAttribute("id");
classList attr18_cls18 first
attr18_cls18.classList.contains("bar");
hasAttribute attr19_cls19 first
attr19_cls19.hasAttribute("id");
classList attr19_cls19 first
attr19_cls19.classList.contains("bar");
hasAttribute attr20_cls20 first
attr20_cls20.hasAttribute("id");
classList attr20_cls20 first
attr20_cls20.classList.contains("bar");
hasAttribute attr2_cls2 last
attr3_cls3.hasAttribute("class");
classList attr2_cls2 last
attr3_cls3.classList.contains("baz");
hasAttribute attr3_cls3 last
attr3_cls3.hasAttribute("a");
classList attr3_cls3 last
attr3_cls3.classList.contains("a");
hasAttribute attr4_cls4 last
attr4_cls4.hasAttribute("b");
classList attr4_cls4 last
attr4_cls4.classList.contains("b");
hasAttribute attr5_cls5 last
attr5_cls5.hasAttribute("c");
classList attr5_cls5 last
attr5_cls5.classList.contains("c");
hasAttribute attr6_cls6 last
attr6_cls6.hasAttribute("d");
classList attr6_cls6 last
attr6_cls6.classList.contains("d");
hasAttribute attr7_cls7 last
attr7_cls7.hasAttribute("e");
classList attr7_cls7 last
attr7_cls7.classList.contains("e");
hasAttribute attr8_cls8 last
attr8_cls8.hasAttribute("f");
classList attr8_cls8 last
attr8_cls8.classList.contains("f");
hasAttribute attr9_cls9 last
attr9_cls9.hasAttribute("g");
classList attr9_cls9 last
attr9_cls9.classList.contains("g");
hasAttribute attr10_cls10 last
attr10_cls10.hasAttribute("h");
classList attr10_cls10 last
attr10_cls10.classList.contains("h");
hasAttribute attr11_cls11 last
attr11_cls11.hasAttribute("i");
classList attr11_cls11 last
attr11_cls11.classList.contains("i");
hasAttribute attr12_cls12 last
attr12_cls12.hasAttribute("j");
classList attr12_cls12 last
attr12_cls12.classList.contains("j");
hasAttribute attr13_cls13 last
attr13_cls13.hasAttribute("k");
classList attr13_cls13 last
attr13_cls13.classList.contains("k");
hasAttribute attr14_cls14 last
attr14_cls14.hasAttribute("l");
classList attr14_cls14 last
attr14_cls14.classList.contains("l");
hasAttribute attr15_cls15 last
attr15_cls15.hasAttribute("m");
classList attr15_cls15 last
attr15_cls15.classList.contains("m");
hasAttribute attr16_cls16 last
attr16_cls16.hasAttribute("n");
classList attr16_cls16 last
attr16_cls16.classList.contains("n");
hasAttribute attr17_cls17 last
attr17_cls17.hasAttribute("o");
classList attr17_cls17 last
attr17_cls17.classList.contains("o");
hasAttribute attr18_cls18 last
attr18_cls18.hasAttribute("p");
classList attr18_cls18 last
attr18_cls18.classList.contains("p");
hasAttribute attr19_cls19 last
attr19_cls19.hasAttribute("q");
classList attr19_cls19 last
attr19_cls19.classList.contains("q");
hasAttribute attr20_cls20 last
attr20_cls20.hasAttribute("r");
classList attr20_cls20 last
attr20_cls20.classList.contains("r");

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
hasAttribute attr2_cls2 first
classList attr2_cls2 first
hasAttribute attr3_cls3 first
classList attr3_cls3 first
hasAttribute attr4_cls4 first
classList attr4_cls4 first
hasAttribute attr5_cls5 first
classList attr5_cls5 first
hasAttribute attr6_cls6 first
classList attr6_cls6 first
hasAttribute attr7_cls7 first
classList attr7_cls7 first
hasAttribute attr8_cls8 first
classList attr8_cls8 first
hasAttribute attr9_cls9 first
classList attr9_cls9 first
hasAttribute attr10_cls10 first
classList attr10_cls10 first
hasAttribute attr11_cls11 first
classList attr11_cls11 first
hasAttribute attr12_cls12 first
classList attr12_cls12 first
hasAttribute attr13_cls13 first
classList attr13_cls13 first
hasAttribute attr14_cls14 first
classList attr14_cls14 first
hasAttribute attr15_cls15 first
classList attr15_cls15 first
hasAttribute attr16_cls16 first
classList attr16_cls16 first
hasAttribute attr17_cls17 first
classList attr17_cls17 first
hasAttribute attr18_cls18 first
classList attr18_cls18 first
hasAttribute attr19_cls19 first
classList attr19_cls19 first
hasAttribute attr20_cls20 first
classList attr20_cls20 first
hasAttribute attr2_cls2 last
classList attr2_cls2 last
hasAttribute attr3_cls3 last
classList attr3_cls3 last
hasAttribute attr4_cls4 last
classList attr4_cls4 last
hasAttribute attr5_cls5 last
classList attr5_cls5 last
hasAttribute attr6_cls6 last
classList attr6_cls6 last
hasAttribute attr7_cls7 last
classList attr7_cls7 last
hasAttribute attr8_cls8 last
classList attr8_cls8 last
hasAttribute attr9_cls9 last
classList attr9_cls9 last
hasAttribute attr10_cls10 last
classList attr10_cls10 last
hasAttribute attr11_cls11 last
classList attr11_cls11 last
hasAttribute attr12_cls12 last
classList attr12_cls12 last
hasAttribute attr13_cls13 last
classList attr13_cls13 last
hasAttribute attr14_cls14 last
classList attr14_cls14 last
hasAttribute attr15_cls15 last
classList attr15_cls15 last
hasAttribute attr16_cls16 last
classList attr16_cls16 last
hasAttribute attr17_cls17 last
classList attr17_cls17 last
hasAttribute attr18_cls18 last
classList attr18_cls18 last
hasAttribute attr19_cls19 last
classList attr19_cls19 last
hasAttribute attr20_cls20 last
classList attr20_cls20 last

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/133.0.0.0 Safari/537.36

Browser/OS: Chrome 133 on Windows

View result in a separate tab

Test name	Executions per second
hasAttribute attr2_cls2 first	35542548.0 Ops/sec
classList attr2_cls2 first	36445720.0 Ops/sec
hasAttribute attr3_cls3 first	36003444.0 Ops/sec
classList attr3_cls3 first	37086264.0 Ops/sec
hasAttribute attr4_cls4 first	35703776.0 Ops/sec
classList attr4_cls4 first	37027956.0 Ops/sec
hasAttribute attr5_cls5 first	35787524.0 Ops/sec
classList attr5_cls5 first	37813688.0 Ops/sec
hasAttribute attr6_cls6 first	36646864.0 Ops/sec
classList attr6_cls6 first	37652084.0 Ops/sec
hasAttribute attr7_cls7 first	35881300.0 Ops/sec
classList attr7_cls7 first	37699080.0 Ops/sec
hasAttribute attr8_cls8 first	36037212.0 Ops/sec
classList attr8_cls8 first	37669864.0 Ops/sec
hasAttribute attr9_cls9 first	35827128.0 Ops/sec
classList attr9_cls9 first	37432036.0 Ops/sec
hasAttribute attr10_cls10 first	35969960.0 Ops/sec
classList attr10_cls10 first	37808820.0 Ops/sec
hasAttribute attr11_cls11 first	35758604.0 Ops/sec
classList attr11_cls11 first	37475424.0 Ops/sec
hasAttribute attr12_cls12 first	35598720.0 Ops/sec
classList attr12_cls12 first	36246516.0 Ops/sec
hasAttribute attr13_cls13 first	35771108.0 Ops/sec
classList attr13_cls13 first	37367908.0 Ops/sec
hasAttribute attr14_cls14 first	35596368.0 Ops/sec
classList attr14_cls14 first	37292844.0 Ops/sec
hasAttribute attr15_cls15 first	35739728.0 Ops/sec
classList attr15_cls15 first	37291260.0 Ops/sec
hasAttribute attr16_cls16 first	35952672.0 Ops/sec
classList attr16_cls16 first	37218912.0 Ops/sec
hasAttribute attr17_cls17 first	35943220.0 Ops/sec
classList attr17_cls17 first	37290360.0 Ops/sec
hasAttribute attr18_cls18 first	35971896.0 Ops/sec
classList attr18_cls18 first	37543512.0 Ops/sec
hasAttribute attr19_cls19 first	36072772.0 Ops/sec
classList attr19_cls19 first	37415608.0 Ops/sec
hasAttribute attr20_cls20 first	36044884.0 Ops/sec
classList attr20_cls20 first	37955464.0 Ops/sec
hasAttribute attr2_cls2 last	69978720.0 Ops/sec
classList attr2_cls2 last	37834204.0 Ops/sec
hasAttribute attr3_cls3 last	36205260.0 Ops/sec
classList attr3_cls3 last	31756776.0 Ops/sec
hasAttribute attr4_cls4 last	36324152.0 Ops/sec
classList attr4_cls4 last	31718548.0 Ops/sec
hasAttribute attr5_cls5 last	27750808.0 Ops/sec
classList attr5_cls5 last	26105566.0 Ops/sec
hasAttribute attr6_cls6 last	35795640.0 Ops/sec
classList attr6_cls6 last	31322912.0 Ops/sec
hasAttribute attr7_cls7 last	27925598.0 Ops/sec
classList attr7_cls7 last	25387124.0 Ops/sec
hasAttribute attr8_cls8 last	27747278.0 Ops/sec
classList attr8_cls8 last	24074662.0 Ops/sec
hasAttribute attr9_cls9 last	35405540.0 Ops/sec
classList attr9_cls9 last	31008758.0 Ops/sec
hasAttribute attr10_cls10 last	27863298.0 Ops/sec
classList attr10_cls10 last	25830404.0 Ops/sec
hasAttribute attr11_cls11 last	35298624.0 Ops/sec
classList attr11_cls11 last	30613394.0 Ops/sec
hasAttribute attr12_cls12 last	27894538.0 Ops/sec
classList attr12_cls12 last	25937322.0 Ops/sec
hasAttribute attr13_cls13 last	34731308.0 Ops/sec
classList attr13_cls13 last	29818994.0 Ops/sec
hasAttribute attr14_cls14 last	26755502.0 Ops/sec
classList attr14_cls14 last	25363096.0 Ops/sec
hasAttribute attr15_cls15 last	26524208.0 Ops/sec
classList attr15_cls15 last	25346686.0 Ops/sec
hasAttribute attr16_cls16 last	27401652.0 Ops/sec
classList attr16_cls16 last	25362172.0 Ops/sec
hasAttribute attr17_cls17 last	27385754.0 Ops/sec
classList attr17_cls17 last	25247076.0 Ops/sec
hasAttribute attr18_cls18 last	33871832.0 Ops/sec
classList attr18_cls18 last	29506828.0 Ops/sec
hasAttribute attr19_cls19 last	33510838.0 Ops/sec
classList attr19_cls19 last	27925926.0 Ops/sec
hasAttribute attr20_cls20 last	32891114.0 Ops/sec
classList attr20_cls20 last	28077466.0 Ops/sec

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

LLMs can make mistakes. Check important info.

This benchmark compares the performance of two different methods for checking the presence of values in HTML elements: `classList.contains` and `hasAttribute`. The tests are performed on a variety of HTML elements that have both class attributes and other data attributes.

### Methods Being Compared:

1. **`hasAttribute(name)` Method**:
   - **Purpose**: Determines whether the specified element has an attribute with the given name. It returns a boolean value indicating the presence (true) or absence (false) of the attribute.
   - **Usage in Benchmark**: Various elements are tested for the presence of the `id` attribute, and in some cases, other attributes (`class`, `a`, `b`, etc.).
   - **Pros**:
     - Directly retrieves whether an attribute exists, which can be useful for elements that may have non-class attributes.
     - Clear semantics when checking for specific attributes.
   - **Cons**:
     - Generally requires more overhead than checking classes, especially for elements that have many attributes.
     - The performance can vary depending on the number of attributes present.

2. **`classList.contains(className)` Method**:
   - **Purpose**: Checks if the specified class exists in the element's list of classes. It returns a boolean indicating whether the class is present.
   - **Usage in Benchmark**: Elements are tested for the presence of specific classes (e.g., `bar`, `baz`, `a`, `b`, etc.).
   - **Pros**:
     - Designed specifically for class checks, making it potentially faster and more efficient in contexts where you need to verify CSS classes.
     - Provides clearer intent when manipulating CSS classes on elements.
   - **Cons**:
     - Only works with classes, limiting its utility for attributes outside the realm of CSS.
     - May not be applicable to all use cases, especially for attributes other than class.

### Considerations

- **Performance**: 
  - The benchmark results show varying execution speeds for both methods across different test cases. It is notable that checking for the presence of an `id` attribute generally performed better than checking for some classes.
  - For example, the fastest result recorded was for the `hasAttribute` method, indicating that it may be more efficient under certain conditions (e.g., simpler elements).

- **DOM Structure**: 
  - The performance of either method can also be impacted by the structure and complexity of the DOM. Elements with more attributes can lead to increased overhead for `hasAttribute`.
  
- **Element Count**: 
  - The benchmark included tests with elements that have different counts of classes and attributes. The overhead of DOM manipulation (like creating those elements) also impacts the measurement and should be accounted for when interpreting results.

### Alternatives

1. **Using jQuery or Other Libraries**: 
   - Libraries such as jQuery provide utility functions (like `.hasClass()`) specifically designed for class manipulations. They offer more extensive cross-browser compatibility and additional features but may add overhead compared to native methods.
   - Their internal optimizations might lead to different performance characteristics depending on the use case.

2. **Custom Logic**: 
   - Developers can implement custom functions for checking class presence or attribute existence. However, creating efficient, robust implementations can require significant effort and may not outperform built-in methods.

3. **Using CSS Selectors via `querySelector`**: 
   - You can check for class presence using `document.querySelector` with a selector string. While clear and powerful, this may be slower for specific checks compared to the direct classList method.

### Conclusion

This benchmark provides insights into the relative performance of two commonly used JavaScript methods for checking class and attribute presence in the context of the DOM. The results highlight circumstances where one might be preferable to the other. Generally, `classList.contains` is better when working directly with classes, while `hasAttribute` is suited for broader checks across various attributes, with performance and use cases guiding the choice of one over the other.

Related benchmarks: