Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
data attributes versus classes
(version: 0)
Comparing performance of:
attribute vs classes
Created:
3 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div id="foo"></div>
Script Preparation code:
var element = document.getElementById("foo"); var i = 1000; while (i--) { element.append(document.createElement('div')); }
Tests:
attribute
var element = document.getElementById("foo"); for (const div of element.querySelectorAll('div')) { div.setAttribute("data-foo", "1"); } document.querySelectorAll('[data-foo]').forEach(div => div.removeAttribute('data-is-foo'));
classes
var element = document.getElementById("foo"); for (const div of element.querySelectorAll('div')) { div.classList.add("is_foo", "foo_type_1"); } element.querySelectorAll('.is_foo').forEach(element => element.classList.remove('is_foo', 'foo_type_1'));
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
attribute
classes
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
9 months ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Safari/537.36 Edg/141.0.0.0
Browser/OS:
Chrome 141 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=618710" width="100%" height="500px"></iframe>
attribute
2K/s
classes
613/s
View exact numbers
Test name
Executions per second
✓
attribute
2,138 Ops/sec
classes
613 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the provided benchmark and its test cases. **Benchmark Overview** The benchmark is designed to compare two approaches for setting attributes on HTML elements: 1. **Data Attributes**: Using `setAttribute()` with a data attribute (e.g., `data-foo`) to set values, and then removing it using `removeAttribute()`. 2. **Classes**: Using the `classList` API to add and remove classes (in this case, "is_foo" and "foo_type_1"). **Library and Framework Considerations** In the first test case (`attribute`), a library is not explicitly mentioned, but the `document.getElementById()` method and the `querySelectorAll()` method are used. These methods are part of the DOM API, which is built into JavaScript. In the second test case (`classes`), the `classList` API is used, which is also part of the DOM API. **Test Case Analysis** The two test cases differ in their approach: 1. **Attribute Test Case**: In this test, elements are appended to a container using `while` loop. Then, for each element, the `setAttribute()` method is used to set the data attribute (`data-foo`) and remove it immediately using `removeAttribute()`. The second part of the script uses `querySelectorAll()` to find all elements with the "data-foo" attribute. 2. **Class Test Case**: In this test, elements are appended to a container using a `for...of` loop. Then, for each element, the `classList.add()` method is used to add classes ("is_foo" and "foo_type_1"), followed by removing those classes using the `classList.remove()` method. The second part of the script uses another `querySelectorAll()` method to find all elements with the class "is_foo". **Pros and Cons** Here's a brief summary of the pros and cons for each approach: * **Data Attributes (Attribute Test Case)**: + Pros: Faster setup, as it doesn't require parsing CSS rules. + Cons: May lead to more complex attribute names, and might not be supported by older browsers or environments that don't support data attributes. * **Classes (Class Test Case)**: + Pros: More readable and maintainable code, as classes can provide a clear and concise way to group styles. + Cons: May require parsing CSS rules, which can lead to slower performance. **Special JavaScript Features** There are no special features mentioned in the benchmark definitions. **Alternatives** Other alternatives for setting attributes or adding classes include: * Using `style` attribute instead of `data-foo` * Using CSS classes and `element.style.display = 'block';` * Using a CSS-in-JS solution like styled-components or Emotion * Using a library like jQuery to handle DOM manipulation Keep in mind that these alternatives might have their own trade-offs, such as performance impact, code complexity, or compatibility issues.
Related benchmarks
className vs. setAttribute vs. classList
Comments
Confirm delete:
Do you really want to delete benchmark?