Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
className vs. setAttribute data attribute vs. classList
(version: 0)
Benchmark.js
Evaluate setting data attributes vs classes
Comparing performance of:
className vs setAttribute vs classList
Created:
8 years ago
by:
Guest
Go to the latest result
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>
Run tests (3)
Previous results
Fork
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
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=509423" width="100%" height="500px"></iframe>
className
69K/s
setAttribute
31K/s
classList
26K/s
View exact numbers
Test name
Executions per second
✓
className
68,532 Ops/sec
setAttribute
30,764 Ops/sec
classList
26,123 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
**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 vs. classList
Native JS classList versus Native JS getAttribute
classList.add vs setAttribute
DataAttribute vs Class Selector on body
setAttribute vs classList.add
Comments
Confirm delete:
Do you really want to delete benchmark?