Benchmark: className vs. setAttribute vs. classList

HTML Preparation code:

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

Tests:

className
var element = document.getElementById("foo"); var i = 1000; while (i--) { element.className += "bar"; }
classList
var element = document.getElementById("foo"); var i = 1000; while (i--) { element.classList.add("bar"); }

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 compares three different methods for adding the class "bar" to an HTML element with the id "foo" 1000 times:

**Methods Compared:**

* **`className += "bar";`**: This method directly manipulates the `className` property of the HTML element. In each iteration, it appends "bar" to the existing class string.
* **`classList.add("bar");`**: This method uses the `classList` object associated with the HTML element. It adds the class "bar" to the element's list of classes.

**Pros and Cons:**

* **`className += "bar";`**: 
    * **Pro:**  Simpler syntax, potentially faster for very small numbers of classes.
    * **Con:** Can become inefficient with many classes, as it involves string concatenation in each iteration. It's also prone to errors if not handled carefully (e.g., duplicate classes).

* **`classList.add("bar");`**: 
    * **Pro:**  More efficient for managing larger numbers of classes, avoids potential string concatenation issues. Designed specifically for handling class lists, offering features like removing and toggling classes.
    * **Con:** Slightly more complex syntax than directly manipulating `className`.

**Other Considerations:**

The benchmark results indicate that using `classList.add("bar")` is significantly faster than `className += "bar";`, especially as the number of iterations increases. This highlights the performance benefits of utilizing built-in DOM APIs designed for specific tasks.

**Alternatives:**
While not explicitly tested in this benchmark, other ways to modify CSS classes include:

* **Using a CSS framework**: Frameworks like Bootstrap or Tailwind CSS often provide utility classes that simplify styling and class management.
* **Dynamically applying/removing styles**: You can directly manipulate the element's style properties using JavaScript, but this approach might not be as efficient for managing large numbers of classes.

Let me know if you have any more questions.

Related benchmarks:

className vs. setAttribute vs. classList (version: 0)

Comparing performance of: className vs classList

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