Benchmark: className vs. setAttribute vs. classList with removal

HTML Preparation code:

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

Tests:

className
var element = document.getElementById("foo"); var i = 1000; while (i--) { element.className = "bar"; element.className.replace("bar", ""); }
setAttribute
var element = document.getElementById("foo"); var i = 1000; while (i--) { element.setAttribute("class", "bar"); element.setAttribute("class", element.getAttribute("class").replace("bar","")); }
classList
var element = document.getElementById("foo"); var i = 1000; while (i--) { element.classList.add("bar"); element.classList.remove("bar"); }

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 years ago)

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

Browser/OS: Chrome 120 on Windows

View result in a separate tab

Test name	Executions per second
className	5061.4 Ops/sec
setAttribute	1036.2 Ops/sec
classList	911.1 Ops/sec

Autogenerated LLM Summary (model llama3.1:latest, generated one year ago):

LLMs can make mistakes. Check important info.

Let's dive into the benchmarking results.

**Benchmark Definition**

The benchmark tests three different approaches to setting and removing CSS classes on an HTML element:

1. **className**: Setting the `className` property directly using string manipulation (`element.className = "bar";`, followed by `element.className.replace("bar", "");`)
2. **setAttribute**: Using the `setAttribute` method with a string value (`element.setAttribute("class", "bar");`, followed by `element.setAttribute("class", element.getAttribute("class").replace("bar",""));`)
3. **classList**: Utilizing the `classList` API to add and remove classes (`element.classList.add("bar");`, followed by `element.classList.remove("bar");`)

**Library/Syntax**

There is no external library used in this benchmark.

**Test Case Explanations**

1. **className**:
	* The test sets a class name "bar" on the element using `element.className = "bar";`.
	* It then removes the class name by replacing it with an empty string using `element.className.replace("bar", "");`.
	* This approach is simple and straightforward but might not be efficient for large numbers of classes.
2. **setAttribute**:
	* The test sets a class attribute on the element using `element.setAttribute("class", "bar");`.
	* It then removes the class attribute by setting it to an empty string, using `element.getAttribute("class")` and replacing "bar" with an empty string.
	* This approach is more verbose than the first one but still uses string manipulation.
3. **classList**:
	* The test adds a class name "bar" to the element using `element.classList.add("bar");`.
	* It then removes the class name by calling `element.classList.remove("bar");`.
	* This approach is considered more modern and efficient, as it leverages the built-in DOM API.

**Pros/Cons**

* **className**: Simple to implement but might not be efficient for large numbers of classes.
	+ Pros: Easy to read and understand
	+ Cons: Potential performance issues with many classes
* **setAttribute**: More verbose than className but still uses string manipulation.
	+ Pros: Can handle multiple attributes; easy to use when dealing with complex attribute names
	+ Cons: Requires additional string manipulation, which can be slower
* **classList**: Modern and efficient API for working with CSS classes.
	+ Pros: Easy to read and understand; fast performance even with many classes
	+ Cons: May not be compatible with older browsers that don't support the classList API

**Alternatives**

If you need to set or remove multiple classes, consider using the **classList** approach. If you're working with legacy code or older browsers, the **setAttribute** method might still be useful.

For setting a single class, the **className** approach is sufficient and easy to read.

Keep in mind that these results are specific to this particular test case and browser combination (Chrome 120). The performance differences may vary across different browsers and versions.

Related benchmarks:

className vs. setAttribute vs. classList with removal (version: 0)

Comparing performance of: className vs setAttribute vs classList

Created: 7 years ago by: Guest

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.1:latest, generated one year ago):