Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
setAttribute, classList with css
(version: 0)
Comparing performance of:
classList vs setAttribute
Created:
3 years ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<style> .bar, [bar] { background: black; clolor: white; width: 50%; } </style> <div id="foo"></div>
Tests:
classList
var element = document.getElementById("foo"); element.classList.add("bar"); let w = element.clientWidth;
setAttribute
var element = document.getElementById("foo"); element.setAttribute("bar", ""); let w = element.clientWidth;
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
classList
setAttribute
Fastest:
N/A
Slowest:
N/A
Latest run results:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
I'll break down the benchmark and explain what's being tested, compared options, pros and cons, and other considerations. **Benchmark Overview** MeasureThat.net is testing two different approaches for setting styles on an HTML element: using `classList` (a JavaScript API) versus `setAttribute` (a DOM method). The test cases are designed to measure the performance of these two approaches in a specific scenario: 1. Create an HTML element with an ID "foo" and set its CSS class to "bar". 2. Get the client width of the element. **Options Compared** Two options are being compared: 1. **`classList`**: Using the `classList` property to add a CSS class to the element. 2. **`setAttribute`**: Using the `setAttribute` method to set the `bar` attribute on the element. **Pros and Cons of Each Approach** **`classList`** Pros: * More modern and JavaScript-way of setting styles * Can be used with other libraries like React or Vue.js Cons: * May have performance overhead due to the additional indirection (accessing a property that returns an array) * Less compatible with older browsers **`setAttribute`** Pros: * Faster execution, as it directly sets the attribute on the element * More compatible with older browsers Cons: * Less modern and less JavaScript-way of setting styles * May not be suitable for use with other libraries like React or Vue.js **Other Considerations** * Both approaches have similar performance characteristics in terms of CPU cycles used. However, `setAttribute` might be slightly faster due to the direct attribute set. * The test results suggest that `setAttribute` is currently faster than `classList` in this specific scenario. **Library and Special JS Feature** The test case uses the `classList` property, which is a part of the W3C DOM specification. It's a modern JavaScript API for setting and managing CSS classes on elements. **Other Alternatives** If you want to compare other approaches for setting styles on an element, some alternatives could be: * Using a CSS-in-JS library like Emotion or styled-components * Creating a custom function to set the style using `style` property * Using a library like jQuery for DOM manipulation Keep in mind that each alternative has its own pros and cons, and might not be suitable for every use case.
Related benchmarks:
className vs. setAttribute vs. classList
Css vs javascript add class
Css vs javascript add classss
set/removeAttribute, classList with css
Comments
Confirm delete:
Do you really want to delete benchmark?