Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
Set className vs. setAttribute vs classList
(version: 2)
Benchmark.js
Comparing performance of:
className vs setAttribute vs classList
Created:
7 years ago
by:
Registered User
Go to the latest result
HTML Preparation code:
<div id="foo"></div>
Tests:
className
var element = document.getElementById("foo").cloneNode(true); var i = 1000; while (i--) { element.className = (element.className || '') + "bar-" + i; }
setAttribute
var element = document.getElementById("foo").cloneNode(true); var i = 1000; while (i--) { element.setAttribute("class", element.getAttribute("class") + "bar-" + i); }
classList
var element = document.getElementById("foo").cloneNode(true); var i = 1000; while (i--) { element.classList.add("bar-" + i); }
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:
7 months ago
)
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:147.0) Gecko/20100101 Firefox/147.0
Browser/OS:
Firefox 147 on Mac OS X 10.15
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=625322" width="100%" height="500px"></iframe>
setAttribute
130/s
className
128/s
classList
22/s
View exact numbers
Test name
Executions per second
✓
setAttribute
130 Ops/sec
className
128 Ops/sec
classList
22 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the provided JSON benchmark definition and test cases. **Benchmark Definition:** The benchmark measures the performance of three different ways to update the class name of an HTML element: 1. `className`: Setting the class name directly using the `className` property. 2. `setAttribute`: Setting the class name as a attribute using the `setAttribute` method. 3. `classList`: Adding the class name to the element's class list using the `classList` API. **Options Compared:** * `className`: Sets the class name directly on the element. + Pros: Simple and efficient, as it modifies the internal state of the element. + Cons: May not be supported in older browsers or certain environments that don't like to update class names dynamically. * `setAttribute`: Sets the class name as a attribute using the `setAttribute` method. + Pros: More flexible than `className`, as it allows for more complex class naming schemes and can be used in older browsers that don't support `classList`. + Cons: May lead to slower performance due to the need to parse the attribute value, and may cause issues with CSS selectors or other parts of the DOM. * `classList`: Adds the class name to the element's class list using the `classList` API. + Pros: More modern and efficient than setting an attribute, as it updates the internal state of the element without affecting other attributes. It also allows for easier removal and modification of classes. + Cons: May not be supported in older browsers or certain environments that don't support `classList`. **Libraries and APIs Used:** * No explicit libraries are used in this benchmark definition. The `classList` API is a standard part of the DOM, while `setAttribute` is a method on the `Element` interface. **Special JS Features/Syntax:** None are explicitly mentioned or required for this benchmark. **Other Considerations:** * It's worth noting that setting an attribute (using `setAttribute`) can lead to slower performance due to the need to parse the attribute value, which may be unnecessary if you're only using it for class naming purposes. * Using `classList` is generally considered more modern and efficient than setting a class name directly or using `setAttribute`, as it updates the internal state of the element without affecting other attributes. **Alternatives:** * Other alternatives to these three methods include: + Using CSS classes and applying them dynamically using JavaScript. This can be more efficient than updating the class name directly, but may require additional CSS rules. + Using a library like jQuery or a custom solution to manage class names on elements. These libraries can provide more flexibility and power, but may add unnecessary overhead. Overall, this benchmark provides a good starting point for evaluating the performance of different approaches to updating an HTML element's class name.
Related benchmarks
className vs. setAttribute vs. classList
Native JS classList versus Native JS getAttribute
setAttribute(...) vs. classList.add(...) vs classList.value vs className
classList.add vs setAttribute
setAttribute vs classList.add
Comments
Confirm delete:
Do you really want to delete benchmark?