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

HTML Preparation code:

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

Tests:

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

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36

Browser/OS: Chrome 116 on Linux

View result in a separate tab

Test name	Executions per second
setAttribute(...)	49623.7 Ops/sec
classList.add	15383.7 Ops/sec
classList.value	61755.8 Ops/sec
className	81992.9 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what's being tested in the provided JSON benchmark.

The main test case is comparing four different approaches to set multiple classes on an HTML element:

1. `setAttribute("class", "foo bar baz")`
2. `classList.add("foo", "bar", "baz")`
3. `classList.value = "foo bar baz"`
4. `element.className = "foo bar baz"`

These approaches are being compared in a loop, with 100 iterations, to measure their performance.

**Options Comparison:**

* **`setAttribute()`**: This method sets the `class` attribute of an element and appends new classes to it. It's a straightforward way to set multiple classes.
	+ Pros: Easy to use, works across browsers.
	+ Cons: Can be slower due to DOM manipulation.
* **`classList.add()`**: This method adds one or more classes to an element without removing existing ones. However, in this benchmark, it's being used with three arguments, which might not be its intended use.
	+ Pros: Fast and efficient, works across browsers.
	+ Cons: Not the most intuitive way to set multiple classes, especially if you need to remove existing classes.
* **`classList.value`**: This property returns a string representing all classes of an element. Setting it in this benchmark will overwrite any existing class names.
	+ Pros: Simple and efficient way to set a single class name (not suitable for setting multiple classes).
	+ Cons: Not designed for setting multiple classes, might not work as expected with large strings.
* **`element.className`**: This property sets the value of the `class` attribute directly. It's often used in older JavaScript codebases or when working with legacy browsers.
	+ Pros: Works across browsers, easy to use.
	+ Cons: Can be slower due to DOM manipulation and might require more manual class management.

**Library Used:**

None of the options are using any external libraries, as they are built-in methods or properties of HTML elements.

**Special JavaScript Features/Syntax:**

None mentioned in the provided benchmark. However, it's worth noting that `classList.add()` was introduced in ECMAScript 2017 (ES7), so this benchmark might not be fully compatible with older browsers or versions of JavaScript.

**Other Alternatives:**

* For setting multiple classes, you can also use CSS classes and add them using the `classList` property, but only if you're working within a specific scope (e.g., within an element or a document).
* If performance is critical, you might consider using a library like FastDOM or others that optimize DOM manipulation.
* Alternatively, you could explore other approaches, such as using a CSS-in-JS solution like styled-components or emotion.

Keep in mind that the choice of approach depends on your specific use case, performance requirements, and compatibility concerns.

Related benchmarks:

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

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 one month ago):