Benchmark: setAttribute(...) vs. classList.add(...) vs classList.value vs className (multiple classes, no override)

setAttribute(...) vs. classList.add(...) vs classList.value vs className (multiple classes, no override) (version: 0)

Same as https://www.measurethat.net/Benchmarks/Show/27015/0/setattribute-vs-classlistadd-vs-classlistvalue-vs-class but without override, getter chosen based on https://www.measurethat.net/Benchmarks/Show/27014/0/getattribute-vs-classlistvalue-vs-classname

Comparing performance of: setAttribute(...) vs classList.add vs classList.value vs className

Created: one year ago by: Guest

Jump to the latest result

HTML Preparation code:

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

Tests:

setAttribute(...)
var element = document.getElementById("foo"); var i = 100; while (i--) { element.setAttribute("class", element.className + " bar baz qwe"); }
classList.add
var element = document.getElementById("foo"); var i = 100; while (i--) { element.classList.add("bar", "baz", "qwe"); }
classList.value
var element = document.getElementById("foo"); var i = 100; while (i--) { element.classList.value = element.className + " bar baz qwe"; }
className
var element = document.getElementById("foo"); var i = 100; while (i--) { element.className = element.className + " bar baz qwe"; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
setAttribute(...)
classList.add
classList.value
className

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 months ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36 Edg/128.0.0.0

Browser/OS: Chrome 128 on Windows

View result in a separate tab

Test name	Executions per second
setAttribute(...)	7.9 Ops/sec
classList.add	7726.1 Ops/sec
classList.value	4.5 Ops/sec
className	4.9 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 2 months ago):

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The provided benchmark compares the performance of four different approaches for setting or modifying the `class` attribute of an HTML element in JavaScript:

1. `setAttribute`
2. `classList.add`
3. `classList.value`
4. `className`

The benchmark aims to determine which approach is the most efficient, considering factors such as CPU cycles and memory usage.

**Options Comparison**

Here's a brief summary of each option:

* **`setAttribute`**: This method directly sets the value of the `class` attribute on the element. It can be prone to errors if not used correctly, especially when dealing with multiple classes.
* **`classList.add`**: This method adds one or more classes to the element's class list. It is generally considered a safer and more efficient alternative to `setAttribute`, as it avoids potential issues with class names and values.
* **`classList.value`**: This method sets the value of the `class` attribute on the element by joining all the class names in the class list. While it may seem similar to `setAttribute`, it is actually a separate operation that can lead to performance benefits due to its optimized implementation.
* **`className`**: This method directly sets the value of the `class` attribute on the element, concatenating new classes to the existing ones. It is generally less efficient than using `classList.add` or `classList.value`, as it creates a new string object and updates the attribute value.

**Pros and Cons**

Here's a summary of the pros and cons of each approach:

* **`setAttribute`**:
	+ Pros: Simple, easy to use.
	+ Cons: Prone to errors, inefficient when dealing with multiple classes.
* **`classList.add`**:
	+ Pros: Safer, more efficient, supports adding multiple classes at once.
	+ Cons: May not be suitable for legacy code that uses `setAttribute`.
* **`classList.value`**:
	+ Pros: Optimized implementation, can lead to performance benefits due to its separate operation.
	+ Cons: Less intuitive than other methods, may require additional setup.
* **`className`**:
	+ Pros: Simple, easy to use for simple cases.
	+ Cons: Inefficient when dealing with multiple classes or complex class names.

**Library and Special JS Features**

In this benchmark, the `classList` API is used consistently across all tests. The `classList` API provides a safe and efficient way to manage an element's class list, making it a popular choice for web development.

There are no special JavaScript features or syntaxes mentioned in the provided benchmark.

**Alternatives**

If you need to achieve similar results without using the `classList` API, you can consider the following alternatives:

* **`setAttribute` with multiple classes**: You can concatenate class names and set them individually using `setAttribute`.
* **Using a CSS class list library**: Libraries like `class-list.js` provide an alternative implementation for managing class lists.

Keep in mind that these alternatives may have different performance characteristics compared to the `classList` API.

In conclusion, the provided benchmark highlights the importance of choosing the right method for setting or modifying the `class` attribute on an HTML element. The `classList.add`, `classList.value`, and `className` approaches offer a balance between simplicity, efficiency, and safety, while `setAttribute` should be used with caution due to its potential pitfalls.

Related benchmarks:

setAttribute(...) vs. classList.add(...) vs classList.value vs className (multiple classes, no override) (version: 0)

Same as https://www.measurethat.net/Benchmarks/Show/27015/0/setattribute-vs-classlistadd-vs-classlistvalue-vs-class but without override, getter chosen based on https://www.measurethat.net/Benchmarks/Show/27014/0/getattribute-vs-classlistvalue-vs-classname

Comparing performance of: setAttribute(...) vs classList.add vs classList.value vs className

Created: one year ago by: Guest

Jump to the latest result

setAttribute(...)

classList.add

classList.value

className

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 2 months ago):