Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
className vs. setAttribute vs. classList with removal
(version: 0)
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 = "bar"; element.className.replace("bar", ""); }
setAttribute
var element = document.getElementById("foo"); var i = 1000; while (i--) { element.setAttribute("class", "bar"); element.setAttribute("class", element.getAttribute("class").replace("bar","")); }
classList
var element = document.getElementById("foo"); var i = 1000; while (i--) { element.classList.add("bar"); element.classList.remove("bar"); }
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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36
Browser/OS:
Chrome 120 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=495345" width="100%" height="500px"></iframe>
className
5K/s
setAttribute
1K/s
classList
911/s
View exact numbers
Test name
Executions per second
✓
className
5,061 Ops/sec
setAttribute
1,036 Ops/sec
classList
911 Ops/sec
Autogenerated LLM Summary
(model
gemma2:9b
, generated one year ago):
This benchmark tests three different ways to add and remove the class "bar" from an HTML element with the ID "foo". **Here's a breakdown of each approach:** * **`className`:** This method uses the `className` property directly to set and remove the class. The code iterates 1000 times, adding "bar" and then removing it using `.replace()`. * **Pros:** Simple and straightforward syntax. * **Cons:** Can be inefficient for large numbers of classes as it involves string manipulation. * **`setAttribute`:** This method uses the `setAttribute` function to set and remove the "class" attribute. The code similarly iterates 1000 times, setting the attribute with "bar" and then removing it using `.replace()`. * **Pros:** More reliable than `className` for handling complex class names. * **Cons:** Slower than `classList` due to the overhead of interacting with attributes. * **`classList`:** This method utilizes the built-in `classList` object which provides more efficient methods for adding and removing classes. The code iterates 1000 times, using `add("bar")` to add the class and `remove("bar")` to remove it. * **Pros:** Most performant approach due to optimized operations by the browser. * **Cons:** Requires familiarity with the `classList` API. **Other Considerations:** * **Use Case:** For frequent class manipulation, `classList` is recommended for its performance. For simple scenarios with few classes, `className` might be sufficient. * **Browser Support:** The `classList` API has widespread browser support. Let me know if you have any more questions or want to explore other aspects of this benchmark!
Related benchmarks
setAttribute/removeAttribute vs. classList.add/remove
className vs. setAttribute vs. classList
classList.add vs setAttribute
setAttribute vs classList.add
Comments
Confirm delete:
Do you really want to delete benchmark?