Benchmark: className vs. setAttribute vs. classList v5

HTML Preparation code:

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

Tests:

className
var element = document.getElementById("foo"); var i = 1000; while(i > 0) { element.className += " bar bar2 bar3"; i--; element.className = "demo" }
setAttribute
var element = document.getElementById("foo"); var i = 1000; while(i > 0) { element.setAttribute("class", "demo bar bar2 bar3"); i--; element.className = "demo" }
classList
var element = document.getElementById("foo"); var i = 1000; while(i > 0) { element.classList.add("bar"); element.classList.add("bar2"); element.classList.add("bar3"); i--; element.className = "demo" }

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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36

Browser/OS: Chrome 121 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
className	1608.1 Ops/sec
setAttribute	1808.0 Ops/sec
classList	679.0 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 benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark compares three ways to update the class list of an HTML element:

1. `className` property
2. `setAttribute` method with a string value
3. `classList` API (introduced in ECMAScript 5)

**Options Compared**

* **`className` property**: This is a property that allows setting and getting the CSS class name of an element.
* **`setAttribute` method**: This is a method that sets the value of a specific attribute on an element. In this case, it's used to set the `class` attribute with a string value.
* **`classList` API**: This is a modern API that allows adding, removing, and manipulating CSS class names of an element.

**Pros and Cons**

1. **`className` property**:
	* Pros: Simple, widely supported, and efficient for small updates.
	* Cons: Limited control over the attribute's value type (e.g., no way to set a specific value).
2. **`setAttribute` method**:
	* Pros: Flexible, allows setting any value type (string or number), and compatible with older browsers that don't support `classList`.
	* Cons: Can be slower and less efficient than using the `className` property or `classList`.
3. **`classList` API**:
	* Pros: Modern, flexible, and efficient for large updates or frequent changes.
	* Cons: Requires ECMAScript 5+ support and might not work in older browsers.

**Library and Purpose**

None of these options require a library; they are built-in JavaScript features or APIs.

**Special JS Feature/Syntax**

The `classList` API is a relatively modern feature that allows manipulating CSS class names. It was introduced in ECMAScript 5 (2009) as part of the HTML5 specification. This means that older browsers, like Internet Explorer 8 and earlier, might not support it.

**Other Alternatives**

If you need to update the class list of an element on older browsers or require more control over the attribute's value type, you could consider using other approaches:

* Using `setAttribute` with a different strategy (e.g., setting the attribute's value as a string, then parsing and splitting it).
* Utilizing CSS classes directly (e.g., adding multiple class names to the element's `class` attribute) if you don't need to dynamically manipulate the class list.
* Considering other JavaScript libraries or frameworks that provide similar functionality.

Keep in mind that each approach has its trade-offs, and the choice ultimately depends on your specific use case, browser support requirements, and performance considerations.

Related benchmarks:

className vs. setAttribute vs. classList v5 (version: 0)

Comparing performance of: className vs setAttribute vs classList

Created: 2 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.2:3b, generated one year ago):