Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
classList.add vs setAttribute
(version: 0)
Which is faster? Adding a class to an element of setting an attribute on it?
Comparing performance of:
setAttribute vs classList.add
Created:
2 years 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('mytest', 'true')
classList.add
el.classList.add('mytest')
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=617286" width="100%" height="500px"></iframe>
classList.add
11.6M/s
setAttribute
5.4M/s
View exact numbers
Test name
Executions per second
✓
classList.add
11,639,783 Ops/sec
setAttribute
5,387,300 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, compared, and what pros and cons of each approach are. **Benchmark Definition** The benchmark is testing two different approaches to add a class or attribute to an HTML element: `classList.add` vs `setAttribute`. **What's being tested?** In this case, we're comparing the performance of: 1. **`classList.add`**: This method adds a specified class to an element. It's part of the W3C DOM specification and is supported by most modern browsers. 2. **`setAttribute`**: This method sets the value of an attribute on an element. In this case, we're setting the `mytest` attribute with the value `true`. **Options compared** The two options are being compared in terms of execution time (measured in executions per second). The benchmark aims to determine which approach is faster. **Pros and Cons of each approach:** 1. **`classList.add`**: * Pros: + More intuitive and concise code + Less prone to errors, as it's a standard DOM method + Works with multiple classes at once * Cons: + May not be supported by older browsers or in specific situations (e.g., IE 8-10) 2. **`setAttribute`**: * Pros: + Widespread support across browsers and versions + Can be used for more complex attribute manipulation * Cons: + More verbose code, potentially leading to errors if not used carefully + May not work as expected in certain situations (e.g., with multiple classes) **Library usage** Neither `classList.add` nor `setAttribute` rely on a specific library. They are both built-in DOM methods. **Special JS features or syntax** This benchmark does not use any special JavaScript features or syntax that would affect the execution or outcome of the test. **Other alternatives** If you were to implement this benchmark yourself, alternative approaches might include: * Using `element.style` instead of `classList.add` or `setAttribute` * Using a library like jQuery to manipulate elements and attributes * Implementing custom methods for element manipulation (e.g., using vanilla JavaScript) Keep in mind that these alternatives would likely have different performance characteristics and may not be as widely supported across browsers. **Benchmark preparation code** The provided script preparation code is: ```javascript var el = document.getElementById('test'); ``` This sets up an HTML element with the ID `test` and assigns it to a variable named `el`. The corresponding HTML file should include: ```html <div id="test">Testing</div> ``` This creates an empty `<div>` element with the specified ID, which is then manipulated by the JavaScript code. **Latest benchmark result** The provided raw UAFS (User Agent Fingerprint String) data shows the results for two Firefox 130 runs: * `setAttribute`: approximately 9.29 million executions per second * `classList.add`: approximately 4.83 million executions per second Please note that these values are specific to the given test scenario and may vary depending on your environment, browser version, and other factors.
Related benchmarks
className vs. setAttribute vs. classList
setAttribute vs classList.add (attribute adding)
setAttribute vs classList.add (attribute adding) V2
setAttribute vs classList.add
Comments
Confirm delete:
Do you really want to delete benchmark?