Benchmark: className vs. classList (comparing and adding) FORK

HTML Preparation code:

<div id="foo" class="test"></div>

Tests:

className
var element = document.getElementById("foo"); var i = 1000; while (i--) { if(element.className.indexOf("test") > -1) { element.className = "bar"; }else { element.className = "test"; } }
classList
var element = document.getElementById("foo"); var i = 1000; while (i--) { if(element.classList.contains("test")) { element.classList.add("bar"); } else { element.classList.add("test"); } }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
className
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 dive into the Benchmark Definition and test cases.

**Benchmark Definition**

The benchmark is designed to compare the performance of two approaches:

1. `className` (using `indexOf()` and string concatenation)
2. `classList` (using `contains()` and `add()`)

**Description**

The benchmark measures how many times each approach can execute 1000 iterations, checking if an element's class name contains or matches a specific string.

**Options Compared**

There are two main options being compared:

1. **`className`**: This option uses the `indexOf()` method to check if the element's class name contains the specified string. If it does, the class name is updated to `"bar"`. Otherwise, it updates to `"test"`.
2. **`classList`**: This option uses the `contains()` method to check if the element has a specific class named `"test"`. If it does, the class `"bar"` is added to the element's classes.

**Pros and Cons**

* **`className`**:
	+ Pros: Simple and straightforward approach.
	+ Cons: Can be slower due to string concatenation and multiple `indexOf()` calls.
* **`classList`**:
	+ Pros: Faster, as it uses optimized native methods.
	+ Cons: May require additional library dependencies (e.g., the `classList` polyfill).

**Library**

The `classList` option relies on the `classList` API, which is a standardized API for working with class names in HTML elements. This API was introduced in HTML5 and has improved performance compared to traditional string-based approaches.

**Special JS Feature/Syntax**

None mentioned explicitly, but it's worth noting that the `classList` API uses a modern JavaScript feature: property access on DOM elements (e.g., `element.classList.contains()`).

**Other Alternatives**

If you'd like to experiment with alternative approaches or use different techniques, consider these options:

1. **Using a library**: Instead of using the `classList` API, you could rely on a polyfill library like `classnames` or `class-list`. This would allow you to maintain compatibility with older browsers.
2. **Regular expressions**: You could use regular expressions (e.g., `\btest\b`) to match class names instead of `indexOf()`.
3. **String manipulation**: Explore other string manipulation techniques, such as using `substr()` or `slice()` to extract substrings from the class name.

Feel free to experiment with these alternatives and report your results!

Related benchmarks:

className vs. classList (comparing and adding) FORK (version: 0)

Comparing performance of: className vs classList

Created: 7 years ago by: Guest

Jump to the latest result

className

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):