Benchmark: className vs classListg

HTML Preparation code:

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

Tests:

className
var element = document.getElementById("foo"); element.className = "bar ";
classList
var element = document.getElementById("foo"); element.classList.add("bar");

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
className
classList

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 12 days ago)

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

Browser/OS: Chrome 147 on Windows

View result in a separate tab

Test name	Executions per second
className	2833807.2 Ops/sec
classList	2762758.5 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

LLMs can make mistakes. Check important info.

The benchmark in question compares two different methods for manipulating CSS classes on a DOM element in JavaScript: using `className` and `classList`. Specifically, the comparison is centered around how efficiently each method can add a class to an element.

### Options Being Compared

1. **className**:
   - **Benchmark Definition**: `element.className = "bar ";`
   - This approach directly assigns a string to the `className` property of the HTML element, specifying all classes as a single space-separated string.
  
2. **classList**:
   - **Benchmark Definition**: `element.classList.add("bar");`
   - This approach utilizes the `classList` property, a modern feature that provides more versatile methods to manipulate classes, including `add`, `remove`, `toggle`, and `contains`.

### Pros and Cons

#### 1. Using `className`
- **Pros**:
  - Simplicity: This method can be straightforward as you're directly setting the entire `class` attribute.
  - Compatibility: It's widely supported in all browsers, including older ones.

- **Cons**:
  - Overwrite Issue: When using `className`, you must provide the entire class string, which can lead to overwriting existing classes unintentionally.
  - String Manipulation: It's less flexible, as you need to manually handle spaces and existing class names.

#### 2. Using `classList`
- **Pros**:
  - Flexibility: Allows for individual class manipulations without affecting other classes already applied to the element.
  - Readability: Methods like `add` and `remove` improve code readability and intent.
  - Performance: Generally provides better performance, especially when managing multiple classes because it avoids the overhead of parsing strings.

- **Cons**:
  - Compatibility: Older browsers (particularly Internet Explorer 9 and earlier) do not support the `classList` property, although it's highly supported in modern environments.

### Benchmark Results

The results indicate that the benchmark for `className` achieved **21,707,038 executions per second**, vastly outperforming the `classList` method, which achieved **6,493,166 executions per second**. This stark difference suggests that in this specific case, `className` is more efficient for adding a single class to an element in the browser environment tested.

### Additional Considerations
- **Browser Variability**: Performance can vary significantly based on the browser and the underlying JavaScript engine. The specific version of Chrome used for this test shows very high performance in both methods but with a notable advantage for `className`.
- **Context of Usage**: The choice between `className` and `classList` should also consider the context. For modern applications, the ability to easily manage multiple classes with `classList` often outweighs the raw performance metrics unless performance is critical in highly dynamic applications.
- **Alternatives**: Other alternatives include using libraries such as jQuery that abstract these manipulations away, but they come with their own overhead and complexity. Additionally, developers might consider CSS-in-JS libraries or frameworks that manage CSS styles at the component level, providing another layer of abstraction and component-scoped styles.

In conclusion, while the benchmark shows that `className` is faster in this specific test case, modern JavaScript development generally favors `classList` due to its greater flexibility and readability, especially in applications where class management can be complex.

Related benchmarks:

className vs classListg (version: 1)

Comparing performance of: className vs classList

Created: one year ago by: Guest

Jump to the latest result

className

classList

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):