Benchmark: className vs. getAttribute vs. classList - includes

HTML Preparation code:

<div id="foo" class="c1 c2 c3"></div>

Tests:

className
var element = document.getElementById("foo"); var i = 500; while (i--) { var z = element.className.split(/\s+/); for (j = 0; j < z.length; j++) { z.includes(z[j]) } }
setAttribute
var element = document.getElementById("foo"); var i = 500; while (i--) { var z = element.getAttribute('class').split(/\s+/); var x = []; for (j = 0; j < z.length; j++) { z.includes(z[j]) } }
classList
var element = document.getElementById("foo"); var i = 500; var names = ['c1', 'c2', 'c3'] while (i--) { var x = []; var z = element.classList for (j = 0; j < z.length; j++) { z.contains(names[j]); } }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
className
setAttribute
classList

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested.

**Benchmark Definition**

The benchmark is defined by three test cases:

1. `className`: Tests whether using the `includes` method on an array of class names is faster than using the `split` method with a regular expression.
2. `setAttribute`: Compares the performance of accessing the `class` attribute directly to using the `getAttribute` method and then splitting the result.
3. `classList`: Tests whether using the `contains` method on the `classList` property is faster than iterating over an array of class names.

**Options Compared**

The benchmark compares three different approaches:

1. `className`: Uses the `includes` method to check if a class name exists in the array.
2. `setAttribute`: Directly accesses the `class` attribute and splits its value into an array using `split`.
3. `classList`: Uses the `contains` method on the `classList` property, which is an array of class names.

**Pros and Cons**

Here's a brief overview of each approach:

1. **className**: Pros:
	* More concise and readable code.
	* Can be more efficient if the array contains many duplicate values (since `includes` uses a more optimized internal implementation).
Cons:
	* May require extra processing steps to normalize or preprocess the class names before using `includes`.
2. **setAttribute**: Pros:
	* Fastest execution time, as it directly accesses the attribute without splitting its value.
Cons:
	* More verbose and less readable code.
	* Requires an additional method call (`getAttribute`) which can add overhead.
3. **classList**: Pros:
	* Easy to use and readable code.
	* Automatic normalization of class names (since `classList` provides a list of classes).
Cons:
	* May be slower than `className` if the array contains many duplicate values.

**Library Usage**

None of the test cases use any external libraries. However, `classList` relies on the built-in `DOMTokenList` API, which is implemented in JavaScript using the Web APIs.

**Special JS Features or Syntax**

There are no special JavaScript features or syntax used in this benchmark. The code is standard ECMAScript and uses only built-in methods and properties.

**Alternatives**

If you're interested in exploring alternative approaches, here are some suggestions:

* Using a different method to normalize or preprocess class names before using `includes` (e.g., using a library like Lodash).
* Implementing a custom implementation for the `includes` method to optimize performance.
* Comparing the performance of other ways to access and manipulate CSS classes in HTML elements, such as using CSS selectors or DOM queries.

Keep in mind that these alternatives might not be directly related to the specific use case or requirements of your project.

Related benchmarks:

className vs. getAttribute vs. classList - includes (version: 0)

Comparing performance of: className vs setAttribute vs classList

Created: 2 years ago by: Guest

Jump to the latest result

className

setAttribute

classList

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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