Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
setAttribute vs dataset (v2)
(version: 0)
Benchmark.js
Compare setAttribute to dataset
Comparing performance of:
getAttribute vs dataset
Created:
2 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div id="foo" data-foo="foo_id"></div>
Tests:
getAttribute
var element = document.getElementById("foo"); var i = 10000; while (i--) { element.setAttribute("data-foo", 1); }
dataset
var element = document.getElementById("foo"); var i = 10000; while (i--) { element.dataset.foo = 1; }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
getAttribute
dataset
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
2 years ago
)
User agent:
Mozilla/5.0 (iPhone; CPU iPhone OS 17_1_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.1.2 Mobile/15E148 Safari/604.1
Browser/OS:
Mobile Safari 17 on iOS 17.1.2
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=493743" width="100%" height="500px"></iframe>
getAttribute
3K/s
dataset
1K/s
View exact numbers
Test name
Executions per second
✓
getAttribute
2,844 Ops/sec
dataset
1,371 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 being tested is the difference in performance between using the `setAttribute` method versus the `dataset` property to set attribute values in a JavaScript test case. The benchmark aims to determine which approach is faster and more efficient. **Options Being Compared** Two options are compared: 1. **`setAttribute`**: This method involves setting an attribute on an HTML element using the `setAttribute()` function, followed by assigning a value to that attribute. 2. **`dataset` property**: This property allows you to store key-value pairs as attributes on an HTML element, making it easier to access and manipulate data. **Pros and Cons of Each Approach** ### `setAttribute` Pros: * Widespread support across browsers and platforms * Can be used with any attribute name Cons: * May require more overhead due to the additional function call * Less intuitive than using the `dataset` property for setting attribute values ### `dataset` Property Pros: * More concise and expressive way of storing key-value pairs as attributes * Faster performance compared to using `setAttribute` * More intuitive than using `setAttribute` for setting attribute values Cons: * Limited support across older browsers and platforms (although it's been widely adopted) * May not be suitable for all use cases where specific attribute names are required **Library and Special JS Features Used** In this benchmark, none of the special JS features or syntax are used. The code only relies on standard JavaScript features. **Alternative Approaches** There are alternative approaches to setting attribute values: 1. **`DOMStringManipulation` API**: This API provides a set of methods for manipulating strings and elements in the DOM, including setting attributes. 2. **`MutationObserver` API**: This API allows you to observe changes to an element's attributes, allowing for more control over when attribute changes occur. **Other Considerations** When evaluating performance benchmarks like this one, consider the following factors: * **Browser support**: Ensure that the benchmark is run on a range of browsers and platforms to ensure accurate results. * **Hardware configuration**: Use a consistent hardware setup to minimize variations in performance due to differences in CPU speed or other hardware components. * **Test case variability**: Include multiple test cases with varying inputs and outputs to ensure the benchmark accurately reflects real-world usage patterns. By considering these factors, you can gain a deeper understanding of how different approaches affect performance in JavaScript microbenchmarks.
Related benchmarks
setAttribute vs dataset
getAttribute vs dataset 2
hasAttribute vs dataset
Check data attribute: hasAttribute vs dataset
getAttribute vs dataset (without explicit loop)
Comments
Confirm delete:
Do you really want to delete benchmark?