Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
set/removeAttribute, 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; element.classList.remove("bar");
setAttribute
var element = document.getElementById("foo"); element.setAttribute("bar", ""); let w = element.clientWidth; element.removeAttribute("bar");
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'd be happy to explain the benchmark and its test cases. **Benchmark Overview** The provided JSON represents a JavaScript microbenchmark that measures the performance of two approaches: adding and removing CSS classes using `classList` and setting/removing an attribute called "bar" using `setAttribute`. The benchmark is designed to test how fast these operations are performed in different browsers. **Script Preparation Code** The script preparation code is empty, which means that the benchmark starts with a fresh context, ensuring a clean slate for measuring performance. This is a good practice when running benchmarks to prevent any potential biases due to previous operations affecting the result. **Html Preparation Code** The HTML preparation code includes a simple `<div>` element with an ID of "foo" and some CSS styles that make it visually distinct. The `classList` approach tests the addition and removal of the class "bar", while the `setAttribute` approach tests setting and removing an attribute called "bar". **Test Cases** There are two test cases: 1. **`classList` Approach** This test case measures how fast the code is executed when adding and removing a CSS class using `element.classList.add()` and `element.classList.remove()`. The benchmark prepares a fresh `element` by selecting it from the document, adds the class "bar", calculates the client width of the element, removes the class, and then performs another calculation to ensure that the previous operation is complete. Pros: * Simple to understand and implement * No additional libraries or dependencies required Cons: * May rely on browser-specific behavior (e.g., how `classList` works in different browsers) 2. **`setAttribute` Approach** This test case measures how fast the code is executed when setting and removing an attribute called "bar" using `element.setAttribute()` and `element.removeAttribute()`. Like the first approach, it prepares a fresh `element`, sets the attribute "bar", calculates the client width of the element, removes the attribute, and performs another calculation to ensure that the previous operation is complete. Pros: * More widely supported across browsers compared to `classList` * Typically faster than using CSS classes Cons: * May not work as expected in some browsers (e.g., Internet Explorer) * May require more manual memory management for attributes vs. CSS classes **Library Usage** There is no explicit library usage in these test cases, but the use of `element.classList` suggests that the benchmark relies on the native DOM API provided by web browsers. **Special JS Features or Syntax** Neither of the two approaches uses any special JavaScript features or syntax beyond what is commonly used in web development (e.g., arrow functions, template literals). **Other Alternatives** Some alternative approaches could be: * Using a CSS-in-JS library like styled-components or emotion to avoid using `classList` and attribute manipulation. * Implementing the same functionality using other native DOM methods, such as `element.style` for setting styles. * Comparing performance with virtual DOM libraries like React or Vue.js. Keep in mind that these alternatives might introduce additional dependencies, complexity, or platform-specific behaviors, which could affect benchmark results.
Related benchmarks:
style➜display/backgroundColor VS setAttribute➜display/backgroundColor
Css vs javascript add class
Css vs javascript add classss
setAttribute, classList with css
Comments
Confirm delete:
Do you really want to delete benchmark?