Benchmark: className vs. setAttribute data attribute vs. classList

HTML Preparation code:

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

Tests:

className
var element = document.getElementById("foo"); var i = 1000; while (i--) { element.className = "is-active"; }
setAttribute
var element = document.getElementById("foo"); var i = 1000; while (i--) { element.setAttribute("data-state", "active"); }
classList
var element = document.getElementById("foo"); var i = 1000; while (i--) { element.classList.add("is-active"); }

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 (iPhone; CPU iPhone OS 17_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.4 Mobile/15E148 Safari/604.1

Browser/OS: Mobile Safari 17 on iOS 17.4

View result in a separate tab

Test name	Executions per second
className	68531.7 Ops/sec
setAttribute	30763.7 Ops/sec
classList	26122.6 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview**

The MeasureThat.net benchmark measures the performance of three approaches for setting data attributes or classes on an HTML element: `className`, `setAttribute`, and `classList`. The benchmark is designed to evaluate which approach is the fastest.

**Benchmark Definition**

The benchmark definition specifies that we have a single HTML element (`<div id="foo"></div>`) and perform an operation (setting a class) 1000 times in a loop. The three approaches are:

1. `className`: Setting the `className` attribute directly.
2. `setAttribute`: Using the `setAttribute` method to set the `data-state` attribute with a value of `"active"`.
3. `classList`: Using the `classList` property to add the `is-active` class.

**Options Compared**

The three options are compared in terms of their performance, measured by the number of executions per second (ExecutionsPerSecond). The option with the highest value is considered the fastest.

**Pros and Cons of Each Approach**

1. **className**: This approach is simple and easy to read. However, it may not be as efficient as other approaches since it involves a string concatenation.
2. **setAttribute**: This approach is more efficient than `className` because it avoids string concatenation. However, it requires using the `setAttribute` method, which may add overhead due to function call and argument passing.
3. **classList**: This approach uses a more modern and efficient way of setting classes on an element. It's likely to be faster than `className` since it involves a direct property access and doesn't require string concatenation.

**Library Used**

None, as this is a built-in JavaScript feature.

**Special JS Feature or Syntax**

The benchmark uses the `classList` property, which is a modern JavaScript feature introduced in HTML5. It allows developers to easily manage classes on an element without needing to concatenate strings or use other workarounds.

**Other Considerations**

* The benchmark uses a simple loop with 1000 iterations, which may not be representative of real-world scenarios where loops are more complex.
* The benchmark assumes that the `data-state` attribute is set in isolation from other attributes. In reality, attribute values can interact with each other and affect performance.
* The benchmark only measures performance for setting a single class. In practice, you may need to consider performance when adding multiple classes or using other approaches like CSS classes.

**Alternatives**

Other alternatives to the three options compared include:

1. Using `style` property: Setting a CSS style directly on the element can be faster than using `className` or `setAttribute`. However, it requires more code and may not provide the same level of flexibility.
2. Using a library like jQuery: Libraries like jQuery provide methods for setting classes that are optimized for performance. However, they add an additional dependency and may require more learning and setup.

In conclusion, while there's no single "best" approach, `classList` is likely to be the fastest option due to its direct property access and efficient use of modern JavaScript features.

Related benchmarks:

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

Evaluate setting data attributes vs classes

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