Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
setAttribute vs classList.add
(version: 0)
Comparing performance of:
setAttribute vs classList.add
Created:
one year ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div id="test">Testing</div>
Script Preparation code:
var el = document.getElementById('test');
Tests:
setAttribute
el.setAttribute("class", "class");
classList.add
el.classList.add("class");
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
setAttribute
classList.add
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
10 months ago
)
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/139.0.0.0 Safari/537.36
Browser/OS:
Chrome 139 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=617287" width="100%" height="500px"></iframe>
setAttribute
22.0M/s
classList.add
12.3M/s
View exact numbers
Test name
Executions per second
✓
setAttribute
21,950,630 Ops/sec
classList.add
12,305,418 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
I'll break down the benchmark and its various components to help you understand what's being tested. **Benchmark Overview** The provided benchmark compares two approaches: setting an attribute using `setAttribute` and adding an element to the class list using `classList.add`. The test is designed to measure which approach is faster in a JavaScript environment. **Options Compared** There are two options being compared: 1. **setAttribute**: This method sets the value of a named attribute on an element. 2. **classList.add**: This method adds a class name to an element's class list. **Pros and Cons of Each Approach** * `setAttribute`: * Pros: It is more widely supported across different browsers, as it is part of the DOM specification. * Cons: It might not work exactly as expected in all cases (e.g., when setting a value for an existing attribute), and some features like CSS styles may require additional attributes to be set using `setAttribute`. * `classList.add`: * Pros: This method is more modern, widely supported by newer browsers, and avoids potential issues with attribute naming. It's also cleaner and easier to read. * Cons: Older browsers might not support this method or provide different results due to their specific implementations. **Library Usage** There is no explicit library mentioned in the benchmark definition. However, `classList` is a standard DOM property that allows you to work with an element's class list. It does not require any additional libraries for its functionality. **Special JS Features or Syntax** The only notable feature being tested here is the use of the `classList` property, which has become increasingly common in modern web development due to its benefits over traditional attribute-based approaches. **Other Alternatives** If you're interested in alternatives or want to explore other methods: * **DOM manipulation APIs**: Some developers might choose to create a custom solution using DOM-specific functions like `createElement`, `setAttribute`, and `removeAttribute`. This approach can be more complicated, but it offers flexibility. * **CSS classes and pseudo-classes**: You could use CSS classes and pseudo-classes (like `:nth-child`) to achieve similar results without setting attributes or adding elements. However, this method might not suit all use cases. Keep in mind that each alternative has its trade-offs in terms of performance, browser support, readability, and maintainability. The choice ultimately depends on the specific requirements and constraints of your project. Now you have a better understanding of what's being tested in the provided benchmark.
Related benchmarks
className vs. setAttribute vs. classList
setAttribute vs classList.add (attribute adding)
setAttribute vs classList.add (attribute adding) V2
Comments
Confirm delete:
Do you really want to delete benchmark?