Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
Add Class to existing className vs. setAttribute vs. classList
(version: 4)
Benchmark.js
Comparing performance of:
classListVar vs setAttribute vs classList
Created:
8 years ago
by:
Registered User
Go to the latest result
HTML Preparation code:
<div id="foo" class="class1 class2"></div>
Tests:
classListVar
var element = document.getElementById("foo"); var i = 1000; var classListTemp = element.classList; while (i--) { classListTemp.add("class3"); }
setAttribute
var element = document.getElementById("foo"); var i = 1000; while (i--) { element.setAttribute("class", "class1 class2 class3"); }
classList
var element = document.getElementById("foo"); var i = 1000; while (i--) { element.classList.add("class3"); }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
classListVar
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=507804" width="100%" height="500px"></iframe>
setAttribute
17K/s
classListVar
7K/s
classList
6K/s
View exact numbers
Test name
Executions per second
✓
setAttribute
17,282 Ops/sec
classListVar
6,765 Ops/sec
classList
6,252 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
**Benchmark Overview** The provided JSON represents a JavaScript microbenchmark on the MeasureThat.net website. The benchmark compares three approaches for adding a class to an existing HTML element: `classList`, `setAttribute`, and setting a `className` attribute directly. **Approaches Compared** 1. **classList**: This approach uses the `classList` property of the DOM element, which allows you to add classes dynamically. 2. **setAttribute**: This approach uses the `setAttribute()` method to set the `class` attribute of the element. 3. **setClassname**: Although not explicitly mentioned in the JSON, this is likely an alternative approach, and it's worth noting that the MeasureThat.net website might use a specific implementation or variant of this approach. **Pros and Cons of Each Approach** 1. **classList**: * Pros: More modern and efficient, as it leverages the optimized `classList` property. * Cons: Requires support for CSS classes in HTML5, which not all browsers may have. 2. **setAttribute**: * Pros: Wide browser support, as it's a standard DOM method. * Cons: May be slower due to the additional overhead of parsing and setting an attribute. 3. **setClassname**: (Assumed alternative approach) * Pros: Might offer better performance or different behavior than `classList` in specific scenarios. * Cons: Not explicitly mentioned in the JSON, so its exact implementation is unknown. **Library Usage** None of the provided approaches rely on external libraries. However, if you were to use a library like jQuery or Zepto for DOM manipulation, it might provide an additional layer of complexity and performance impact. **Special JS Features/Syntax** The `classList` property relies on CSS classes in HTML5, which is a relatively modern feature. Not all browsers support this feature, so you should test your code across different browser versions. **Alternative Approaches** If you're interested in exploring alternative approaches for adding a class to an element, consider the following: 1. **CSS**: Using CSS stylesheets or inline styles might be more efficient than JavaScript methods. 2. **DOM mutations**: Other DOM mutation methods, like `appendChild()` or `insertAdjacentHTML()`, could potentially offer better performance. 3. **native Web APIs**: Newer web APIs, such as the Web APIs for CSS and HTML5, might provide optimized solutions for adding classes to elements. Keep in mind that each approach has its trade-offs, and the best solution will depend on your specific use case, browser requirements, and performance constraints.
Related benchmarks
className vs. setAttribute vs. classList
setAttribute vs classList.add (attribute adding) V2
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?