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 setAttribute vs classList
Created:
8 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div id="foo"></div>
Script Preparation code:
var element = document.getElementById("foo");
Tests:
className
element.className = "bar";
setAttribute
element.setAttribute("class", "bar");
classList
element.classList.add("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:
7 months ago
)
User agent:
Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36
Browser/OS:
Chrome 137 on Linux
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=622405" width="100%" height="500px"></iframe>
className
9.1M/s
setAttribute
6.7M/s
classList
3.7M/s
View exact numbers
Test name
Executions per second
✓
className
9,084,830 Ops/sec
setAttribute
6,669,675 Ops/sec
classList
3,680,662 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the provided benchmark and explain what is being tested, along with the pros and cons of each approach. **What is being tested?** The benchmark compares three ways to set a CSS class on an HTML element: 1. `className` 2. `setAttribute` (with "class" as the attribute name) 3. `classList` (using the `classList` property) Each test case uses a different syntax to set the CSS class, and the benchmark measures their performance in terms of executions per second. **Options compared:** * **1. `className`**: This method sets the value of the `className` attribute directly on the element. + Pros: Simple, concise, and widely supported. + Cons: May not be as efficient as other methods, as it involves setting an attribute that needs to be parsed by the browser. * **2. `setAttribute`**: This method uses the `setAttribute` method to set a custom attribute on the element with the value "class" and then sets the value of the class using string concatenation or interpolation. + Pros: Can be more efficient than setting a CSS class, as it involves setting a single attribute instead of multiple ones. + Cons: Requires more code and may not be as concise as other methods. * **3. `classList`**: This method uses the `classList` property to add a new class or modify an existing one. + Pros: Efficient and concise, as it avoids setting attributes or concatenating strings. + Cons: May not be supported by older browsers. **Library used:** The benchmark does not explicitly mention any libraries. However, the use of `classList` suggests that the benchmark is assuming a modern browser that supports this property. **Special JS feature or syntax:** There are no special JavaScript features or syntaxes mentioned in the benchmark. **Other alternatives:** In addition to the three methods being tested (`className`, `setAttribute`, and `classList`), other approaches to set a CSS class on an element might include: * Setting the `style` attribute directly (e.g., using `element.style.cssClass = 'bar';`) * Using a library like jQuery or Lodash to manipulate elements * Using a CSS-in-JS solution, such as styled-components or Emotion These alternatives may have different performance characteristics and trade-offs, depending on the specific use case and requirements.
Related benchmarks
className vs. setAttribute vs. classList
setAttribute vs classList.add
Comments
Confirm delete:
Do you really want to delete benchmark?