Benchmark: className vs. setAttribute vs. classList

HTML Preparation code:

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

Script Preparation code:

var element = document.getElementById("foo");

Tests:

className
element.className = "bar";
setAttribute
element.setAttribute("class", "bar");
classList
element.classList.add("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 months ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:135.0) Gecko/20100101 Firefox/135.0

Browser/OS: Firefox 135 on Windows

View result in a separate tab

Test name	Executions per second
className	23583624.0 Ops/sec
setAttribute	14129318.0 Ops/sec
classList	5742380.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what is being tested, along with the pros and cons of each approach.

**What is being tested?**

The benchmark compares three ways to set a CSS class on an HTML element:

1. `className`
2. `setAttribute` (with "class" as the attribute name)
3. `classList` (using the `classList` property)

Each test case uses a different syntax to set the CSS class, and the benchmark measures their performance in terms of executions per second.

**Options compared:**

* **1. `className`**: This method sets the value of the `className` attribute directly on the element.
	+ Pros: Simple, concise, and widely supported.
	+ Cons: May not be as efficient as other methods, as it involves setting an attribute that needs to be parsed by the browser.
* **2. `setAttribute`**: This method uses the `setAttribute` method to set a custom attribute on the element with the value "class" and then sets the value of the class using string concatenation or interpolation.
	+ Pros: Can be more efficient than setting a CSS class, as it involves setting a single attribute instead of multiple ones.
	+ Cons: Requires more code and may not be as concise as other methods.
* **3. `classList`**: This method uses the `classList` property to add a new class or modify an existing one.
	+ Pros: Efficient and concise, as it avoids setting attributes or concatenating strings.
	+ Cons: May not be supported by older browsers.

**Library used:**

The benchmark does not explicitly mention any libraries. However, the use of `classList` suggests that the benchmark is assuming a modern browser that supports this property.

**Special JS feature or syntax:**

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

**Other alternatives:**

In addition to the three methods being tested (`className`, `setAttribute`, and `classList`), other approaches to set a CSS class on an element might include:

* Setting the `style` attribute directly (e.g., using `element.style.cssClass = 'bar';`)
* Using a library like jQuery or Lodash to manipulate elements
* Using a CSS-in-JS solution, such as styled-components or Emotion

These alternatives may have different performance characteristics and trade-offs, depending on the specific use case and requirements.

Related benchmarks:

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

Comparing performance of: className vs setAttribute vs classList

Created: 6 years ago by: Guest

Jump to the latest result

className

setAttribute

classList

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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