Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
className vs. setAttribute vs. classList v5
(version: 0)
Comparing performance of:
className vs setAttribute vs classList
Created:
2 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div id="foo" class="demo"></div>
Tests:
className
var element = document.getElementById("foo"); var i = 1000; while(i > 0) { element.className += " bar bar2 bar3"; i--; element.className = "demo" }
setAttribute
var element = document.getElementById("foo"); var i = 1000; while(i > 0) { element.setAttribute("class", "demo bar bar2 bar3"); i--; element.className = "demo" }
classList
var element = document.getElementById("foo"); var i = 1000; while(i > 0) { element.classList.add("bar"); element.classList.add("bar2"); element.classList.add("bar3"); i--; element.className = "demo" }
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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36
Browser/OS:
Chrome 121 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=500194" width="100%" height="500px"></iframe>
setAttribute
2K/s
className
2K/s
classList
679/s
View exact numbers
Test name
Executions per second
✓
setAttribute
1,808 Ops/sec
className
1,608 Ops/sec
classList
679 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the provided benchmark and explain what's being tested. **Benchmark Overview** The benchmark compares three ways to update the class list of an HTML element: 1. `className` property 2. `setAttribute` method with a string value 3. `classList` API (introduced in ECMAScript 5) **Options Compared** * **`className` property**: This is a property that allows setting and getting the CSS class name of an element. * **`setAttribute` method**: This is a method that sets the value of a specific attribute on an element. In this case, it's used to set the `class` attribute with a string value. * **`classList` API**: This is a modern API that allows adding, removing, and manipulating CSS class names of an element. **Pros and Cons** 1. **`className` property**: * Pros: Simple, widely supported, and efficient for small updates. * Cons: Limited control over the attribute's value type (e.g., no way to set a specific value). 2. **`setAttribute` method**: * Pros: Flexible, allows setting any value type (string or number), and compatible with older browsers that don't support `classList`. * Cons: Can be slower and less efficient than using the `className` property or `classList`. 3. **`classList` API**: * Pros: Modern, flexible, and efficient for large updates or frequent changes. * Cons: Requires ECMAScript 5+ support and might not work in older browsers. **Library and Purpose** None of these options require a library; they are built-in JavaScript features or APIs. **Special JS Feature/Syntax** The `classList` API is a relatively modern feature that allows manipulating CSS class names. It was introduced in ECMAScript 5 (2009) as part of the HTML5 specification. This means that older browsers, like Internet Explorer 8 and earlier, might not support it. **Other Alternatives** If you need to update the class list of an element on older browsers or require more control over the attribute's value type, you could consider using other approaches: * Using `setAttribute` with a different strategy (e.g., setting the attribute's value as a string, then parsing and splitting it). * Utilizing CSS classes directly (e.g., adding multiple class names to the element's `class` attribute) if you don't need to dynamically manipulate the class list. * Considering other JavaScript libraries or frameworks that provide similar functionality. Keep in mind that each approach has its trade-offs, and the choice ultimately depends on your specific use case, browser support requirements, and performance considerations.
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?