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

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 gemma2:9b, generated one year ago):

LLMs can make mistakes. Check important info.

This benchmark tests the performance of two ways to manipulate the class attribute of an HTML element: using `className` and using `classList`.

**`className`**: This is the older, more traditional way of accessing and modifying the classes of an HTML element. It's a string that holds all the classes separated by spaces. The provided test code uses `indexOf()` to check if a specific class ("test") exists in the `className` string. If it does, it replaces the entire `className`. Otherwise, it adds the "test" class.

**`classList`**: Introduced later, this approach provides an API for managing classes as a list. It's more structured and offers methods like `contains()`, `add()`, and `remove()` for cleaner manipulation. The test code uses `contains()` to check if a specific class is present and then uses `add()` to add or remove classes accordingly.

**Pros and Cons:**

* **`className`**:
    * **Simpler syntax**: Can be easier to read for beginners, especially in simple use cases.
    * **Potentially faster**: In some scenarios, manipulating a single string might be slightly faster than using methods on an object.
* **`classList`**:
    * **More robust**:  Offers better error handling and prevents issues like accidental class duplicates or incorrect spacing.
    * **More flexible**: Allows for more complex manipulations, like removing multiple classes at once or toggling class states.

**Other Considerations:**

* **Modern browsers heavily favor `classList`**. It's generally the recommended approach for new projects due to its advantages in maintainability and performance.

* **Legacy support**:  If you need to ensure compatibility with older browsers that might not fully support `classList`, you'll likely need a fallback solution using `className`.

Let me know if you'd like more details about a specific aspect of the benchmark!

Related benchmarks:

className vs. classList (comparing and adding)1 (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 gemma2:9b, generated one year ago):