Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
setAttribute vs classList.add (attribute adding) V2
(version: 0)
Comparing performance of:
classList.add vs setAttribute
Created:
5 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div id="test" class="first">Testing</div>
Script Preparation code:
var el = document.getElementById('test');
Tests:
classList.add
el.classList.add("second");
setAttribute
el.setAttribute("class", el.className + " second");
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
classList.add
setAttribute
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
one year ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36
Browser/OS:
Chrome 109 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=613383" width="100%" height="500px"></iframe>
classList.add
1.6M/s
setAttribute
2K/s
View exact numbers
Test name
Executions per second
✓
classList.add
1,595,819 Ops/sec
setAttribute
1,902 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net. **Benchmark Overview** The benchmark compares two approaches for adding an attribute (or class) to an HTML element: using `classList.add()` and using `setAttribute()`. The test case is designed to measure the performance difference between these two methods, which are commonly used in JavaScript development. **Options Compared** Two options are compared: 1. **`classList.add()`**: This method adds a class (i.e., attribute) to an element's class list. It's a modern and concise way to modify an element's classes. 2. **`setAttribute()`**: This method sets the value of a named attribute on an element. In this case, it's used to add a new class to an element. **Pros and Cons** **`classList.add()`**: Pros: * Modern and widely supported (most browsers support `classList` since 2015) * More concise and readable code * Easier to manage class names and avoid duplication Cons: * May not be supported in older browsers or environments * Can be slower than `setAttribute()` due to the overhead of manipulating a class list **`setAttribute()`**: Pros: * Widespread support across older browsers and environments * Faster execution time, as it directly sets an attribute without creating a class list Cons: * More verbose code (requires more characters) * Can lead to errors if not used carefully (e.g., invalid attribute names or values) **Other Considerations** When deciding between `classList.add()` and `setAttribute()`, consider the following factors: * **Browser support**: If you need to support older browsers, `setAttribute()` might be a better choice. * **Code readability and maintainability**: Use `classList.add()` for more concise and readable code. * **Performance**: In most cases, `classList.add()` is faster than `setAttribute()`, but the difference may not be noticeable in all scenarios. **Libraries and Special Features** In this benchmark, there are no libraries used. However, it's worth noting that some JavaScript frameworks or libraries (e.g., React) might have their own classes for managing class names, which could affect the performance of `classList.add()` and `setAttribute()`. As for special JS features or syntax, there is none mentioned in this benchmark definition. **Alternatives** If you're interested in exploring alternative approaches to adding attributes or classes to elements, consider: * **`DOM Triton`**: A web standards library that provides a more modern and efficient way of manipulating the DOM. * **`fast-class-list`**: A lightweight library for managing class lists, which can be used with `classList.add()` for improved performance. These alternatives might offer better performance or features than `classList.add()`, but their adoption is still limited compared to the standard `classList` API.
Related benchmarks
className vs. setAttribute vs. classList
setAttribute vs classList.add (attribute adding)
setAttribute vs classList.add
Comments
Confirm delete:
Do you really want to delete benchmark?