Benchmark: Rewrite multiple classes (setAttribute vs. className vs. classList vs setAttribute=List vs className=List)

HTML Preparation code:

<div id="foo" class="a b c"></div>

Tests:

setAttribute
var element = document.getElementById("foo"); var i = 1000; while (i--) { var classes = (0 == i % 2) ? "1 2 3" : "4 5 6"; element.setAttribute("class", classes); }
className
var element = document.getElementById("foo"); var i = 1000; while (i--) { var classes = (0 == i % 2) ? "1 2 3" : "4 5 6"; element.className = classes; }
classList
var element = document.getElementById("foo"); var i = 1000; while (i--) { var classes = (0 == i % 2) ? ["1", "2", "3"] : ["4", "5", "6"]; element.classList.remove(...element.classList); element.classList.add(...classes); }
setAttribte=List
var element = document.getElementById("foo"); var i = 1000; while (i--) { var classes = (0 == i % 2) ? ["1", "2", "3"] : ["4", "5", "6"]; element.setAttribute("class", classes.join(' ')); }
className=List
var element = document.getElementById("foo"); var i = 1000; while (i--) { var classes = (0 == i % 2) ? ["1", "2", "3"] : ["4", "5", "6"]; element.className = classes.join(' '); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
setAttribute
className
classList
setAttribte=List
className=List

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 five different approaches to adding and removing CSS classes from an HTML element:

**Options Compared:**

* **`setAttribute("class", ...)`:**  Directly sets the `class` attribute of the element using a string value. This is the traditional way, but can be less efficient for managing multiple classes.
* **`element.className = "..."`:** Sets the `className` property, which also manipulates the `class` attribute. Similar to `setAttribute`, but often considered more concise and possibly slightly faster.
* **`classList.remove(...)` and `classList.add(...)`:** Utilizes the `classList` API, a modern approach that treats classes as an iterable list. This method is generally considered the most performant and flexible for managing multiple classes.
* **`setAttribute("class", classes.join(' '))`:**  Uses `setAttribute`, but joins an array of classes into a string before setting it. Similar to using `className = ...`.
* **`className = classes.join(' ')`:** Uses the `className` property and joins an array of classes into a string. Same as above, but using `className` instead.

**Pros and Cons:**

| Method | Pros | Cons |
|---|---|---|
| `setAttribute("class", ...)` |  Simple to understand | Can be less efficient for many classes |
| `element.className = "..."` | Concise and potentially faster than `setAttribute` | Less flexible than `classList` |
| `classList.remove(...)/add(...)` | Most performant, flexible for managing classes | Requires understanding the `classList` API |
| `setAttribute("class", classes.join(' '))` / `className = classes.join(' ')` |  Similar performance to other methods | Can be less readable than using `classList` directly |

**Other Considerations:**

* **Browser Support:** All methods are supported in modern browsers, but older browsers might have limitations with certain approaches.
* **Readability and Maintainability:** Using the `classList` API can improve code readability and maintainability, especially when dealing with complex class management logic.

**Alternatives:**

*  Inline styles (using `style` attribute):  Less flexible for changing classes dynamically. 
* CSS frameworks: Provide utility classes and pre-built styling options for common layouts and design elements.

Let me know if you have any more questions about this benchmark!

Related benchmarks:

Rewrite multiple classes (setAttribute vs. className vs. classList vs setAttribute=List vs className=List) (version: 0)

Rewrite multiple classes setAttribute vs. className vs. classList vs. setAttribute=List vs. className=List

Comparing performance of: setAttribute vs className vs classList vs setAttribte=List vs className=List

Created: 2 years ago by: Guest

Jump to the latest result

setAttribute

className

classList

setAttribte=List

className=List

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