Benchmark: Set className vs. setAttribute vs classList

HTML Preparation code:

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

Tests:

className
var element = document.getElementById("foo").cloneNode(true); var i = 1000; while (i--) { element.className = (element.className || '') + "bar-" + i; }
setAttribute
var element = document.getElementById("foo").cloneNode(true); var i = 1000; while (i--) { element.setAttribute("class", element.getAttribute("class") + "bar-" + i); }
classList
var element = document.getElementById("foo").cloneNode(true); var i = 1000; while (i--) { element.classList.add("bar-" + i); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
className
setAttribute
classList

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:147.0) Gecko/20100101 Firefox/147.0

Browser/OS: Firefox 147 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
className	128.4 Ops/sec
setAttribute	129.8 Ops/sec
classList	22.3 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided JSON benchmark definition and test cases.

**Benchmark Definition:**
The benchmark measures the performance of three different ways to update the class name of an HTML element:

1. `className`: Setting the class name directly using the `className` property.
2. `setAttribute`: Setting the class name as a attribute using the `setAttribute` method.
3. `classList`: Adding the class name to the element's class list using the `classList` API.

**Options Compared:**

* `className`: Sets the class name directly on the element.
	+ Pros: Simple and efficient, as it modifies the internal state of the element.
	+ Cons: May not be supported in older browsers or certain environments that don't like to update class names dynamically.
* `setAttribute`: Sets the class name as a attribute using the `setAttribute` method.
	+ Pros: More flexible than `className`, as it allows for more complex class naming schemes and can be used in older browsers that don't support `classList`.
	+ Cons: May lead to slower performance due to the need to parse the attribute value, and may cause issues with CSS selectors or other parts of the DOM.
* `classList`: Adds the class name to the element's class list using the `classList` API.
	+ Pros: More modern and efficient than setting an attribute, as it updates the internal state of the element without affecting other attributes. It also allows for easier removal and modification of classes.
	+ Cons: May not be supported in older browsers or certain environments that don't support `classList`.

**Libraries and APIs Used:**

* No explicit libraries are used in this benchmark definition. The `classList` API is a standard part of the DOM, while `setAttribute` is a method on the `Element` interface.

**Special JS Features/Syntax:**
None are explicitly mentioned or required for this benchmark.

**Other Considerations:**

* It's worth noting that setting an attribute (using `setAttribute`) can lead to slower performance due to the need to parse the attribute value, which may be unnecessary if you're only using it for class naming purposes.
* Using `classList` is generally considered more modern and efficient than setting a class name directly or using `setAttribute`, as it updates the internal state of the element without affecting other attributes.

**Alternatives:**

* Other alternatives to these three methods include:
	+ Using CSS classes and applying them dynamically using JavaScript. This can be more efficient than updating the class name directly, but may require additional CSS rules.
	+ Using a library like jQuery or a custom solution to manage class names on elements. These libraries can provide more flexibility and power, but may add unnecessary overhead.

Overall, this benchmark provides a good starting point for evaluating the performance of different approaches to updating an HTML element's class name.

Related benchmarks:

Set className vs. setAttribute vs classList (version: 2)

Comparing performance of: className vs setAttribute vs classList

Created: 6 years ago by: Registered User

Jump to the latest result

className

setAttribute

classList

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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