Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
className vs. setAttribute vs. classList
(version: 0)
Comparing performance of:
className vs classList
Created:
9 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 = "bar bar1 bar2 bar3 bar4"; }
classList
var element = document.getElementById("foo"); var i = 1000; while (i--) { element.classList.add("bar"); element.classList.add("bar1"); element.classList.add("bar2"); element.classList.add("bar3"); element.classList.add("bar4"); }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
className
classList
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
8 months ago
)
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:144.0) Gecko/20100101 Firefox/144.0
Browser/OS:
Firefox 144 on Mac OS X 10.15
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=621899" width="100%" height="500px"></iframe>
className
27K/s
classList
1K/s
View exact numbers
Test name
Executions per second
✓
className
26,628 Ops/sec
classList
1,234 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down what is being tested in the provided benchmark. The benchmark compares three approaches to adding classes to an HTML element: 1. `className`: This approach sets the entire class name of the element as a single string, e.g., `"bar bar1 bar2 bar3 bar4"`. This is done using the assignment operator (`=`). 2. `setAttribute`: This approach uses the `setAttribute` method to set individual class names one by one, e.g., `element.setAttribute('class', 'bar');`, `element.setAttribute('class', 'bar1');`, and so on. 3. `classList`: This approach uses the `classList` property of the element to add multiple classes at once, e.g., `element.classList.add('bar');`, `element.classList.add('bar1');`, and so on. **Pros and Cons:** * **className**: This approach can be faster for small numbers of classes, as it only requires a single assignment. However, it's slower when dealing with large numbers of classes, as the entire class name needs to be parsed and processed. * `setAttribute`: This approach is generally slower than using the `classList` property, as each individual setAttribute call incurs additional overhead. However, it can still be faster for small sets of classes. * `classList`: This approach is usually the fastest, as it uses a optimized internal data structure to store and manage the class names. **Other Considerations:** * The benchmark doesn't account for any potential side effects or changes to the element's DOM tree when using these approaches. For example, setting multiple classes at once might affect the element's layout or positioning. * It's worth noting that the `classList` property is a relatively new feature in JavaScript (introduced in ECMAScript 2015), and its implementation may vary across different browsers. **Library/Features Used:** None are explicitly mentioned in the benchmark definition, but some assumptions can be made: * The `document.getElementById` method is used to retrieve an element by its ID. * The `Element` object has a `className` property, `setAttribute` method, and `classList` property. If you're using modern JavaScript versions, the `classList` property is supported natively in most browsers. If not, you may need to polyfill or use a third-party library to achieve similar behavior. **Alternative Approaches:** Other approaches to adding classes to an element could include: * Using a CSS class list and manipulating it with JavaScript (e.g., using the `addRule` method of the `CSSStyleSheet` object). * Using a custom DOM implementation that allows for more fine-grained control over class management. * Using a library or framework that provides a more optimized way to manage classes, such as React's class names system.
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?