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

Autogenerated LLM Summary (model gemma2:9b, generated one month 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!

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/119.0

Browser/OS: Firefox 119 on Linux

View result in a separate tab

Test name	Executions per second
setAttribute	3831.8 Ops/sec
className	4448.7 Ops/sec
classList	679.6 Ops/sec
setAttribte=List	2880.0 Ops/sec
className=List	3150.9 Ops/sec

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: one year ago by: Guest

Jump to the latest result

setAttribute

className

classList

setAttribte=List

className=List

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gemma2:9b, generated one month ago):