Benchmark: className vs. getAttribute vs. classList 3

HTML Preparation code:

<div id="foo" class="wl" wl='true'></div>

Tests:

hasAttribute
var element = document.getElementById("foo"); var i = 500; while (i--) { console.log(element.hasAttribute('wl')); }
classList
var element = document.getElementById("foo"); var i = 500; while (i--) { console.log(element.classList.contains('wl')); }
getAtttr
var element = document.getElementById("foo"); var i = 500; while (i--) { console.log(element.getAttribute('wl') === 'true'); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
hasAttribute
classList
getAtttr

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year 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	212.6 Ops/sec
classList	207.2 Ops/sec
getAtttr	211.4 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the provided benchmark and its components to explain what's being tested, compared, and their pros/cons.

**Benchmark Overview**

The test is designed to compare three approaches for checking if an element has a specific attribute: `hasAttribute`, `classList.contains()`, and `getAttribute()` with a comparison operator (`=== 'true'`).

**Test Cases**

Each test case consists of two parts:

1. **Script Preparation Code**: A JavaScript snippet that prepares the environment for the benchmark.
2. **Html Preparation Code**: An HTML fragment that defines an element to be tested.

The script preparation code creates an element with the class `wl` and sets its `wl` attribute to `'true'`. The while loop runs 500 times, printing the result of each test in sequence.

**Test Case Breakdown**

1. **hasAttribute**
	* This test checks if the element has the `wl` attribute using the `hasAttribute()` method.
	* Pros: Simple and efficient, as it only requires a single function call.
	* Cons: May be slower due to additional processing overhead.
2. **classList.contains()**
	* This test uses the `classList` property to check if the element contains the class `'wl'`.
	* Pros: More readable and maintainable, as it's built into the DOM API.
	* Cons: May be slower for large datasets or complex class names.
3. **getAttribute()` with comparison operator
	* This test uses the `getAttribute()` method to retrieve the value of the `wl` attribute and compares it to `'true'`.
	* Pros: Can provide more accurate results, as it returns the actual attribute value rather than just presence.
	* Cons: Requires an additional function call and potential string comparison.

**Library**

None

**Special JS Feature/Syntax**

None mentioned in this explanation. However, note that `classList` is a modern JavaScript feature introduced in ECMAScript 2015 (ES6). If the benchmark were run on older browsers or environments, this might be an issue.

**Other Alternatives**

In addition to these three approaches, other methods for checking attribute presence include:

* Using a regular expression (`/wl/i`) to search for the class name
* Using `document.querySelector()` with a CSS selector (`[class^="wl"]`)
* Implementing a custom function to check attribute presence

Keep in mind that each alternative approach has its own trade-offs and may not be suitable for all use cases.

Related benchmarks:

className vs. getAttribute vs. classList 3 (version: 0)

Comparing performance of: hasAttribute vs classList vs getAtttr

Created: 2 years ago by: Guest

Jump to the latest result

hasAttribute

classList

getAtttr

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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