Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
test setAttribute vs dataset
(version: 0)
Compare setAttribute to dataset (not getAttribute)
Comparing performance of:
getAttribute vs dataset
Created:
3 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div id="foo" data-foo="foo_id"></div>
Script Preparation code:
var element = document.getElementById("foo");
Tests:
getAttribute
let i = 1000; while(i--) element.setAttribute("data-foo", "foo_id_new_"+i);
dataset
let i = 1000; while(i--) element.dataset.foo ="foo_id_new_"+i;
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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36
Browser/OS:
Chrome 125 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=528883" width="100%" height="500px"></iframe>
getAttribute
597/s
dataset
537/s
View exact numbers
Test name
Executions per second
✓
getAttribute
597 Ops/sec
dataset
537 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down what's being tested in the provided JSON benchmark. **Benchmark Overview** The benchmark compares two approaches to set or update an attribute on an HTML element: 1. `setAttribute`: This method sets the specified attribute to the specified value. 2. `dataset` (also known as "data-attribute" or "dataset property"): This is a custom property added to HTML elements in modern browsers, allowing you to store and retrieve data in a more concise way. **Options Compared** The benchmark tests two options: 1. **`setAttribute`**: Sets the attribute directly using the `setAttribute()` method. 2. **`dataset.foo`**: Updates the value of the `foo` property within the `dataset` object, which is accessed like an object property. **Pros and Cons of Each Approach** * `setAttribute`: + Pros: Simple, widely supported, and easy to understand. + Cons: Can be slower than other approaches due to the overhead of creating a new attribute and parsing it. * `dataset.foo`: + Pros: More concise, faster (in some cases), and more modern approach. + Cons: Requires modern browsers that support the `dataset` property. May not work in older browsers. **Other Considerations** When working with attributes or custom properties like `dataset`, keep the following points in mind: * **Attribute naming conventions**: Use valid attribute names, avoiding special characters and reserved keywords. * **Case sensitivity**: Some browsers may be case-sensitive when setting or retrieving attributes, so consider using camelCase or lowercase for attribute names. * **Browser support**: Make sure to test your code across various browser versions and devices. **Library Used** None is explicitly mentioned in the benchmark JSON. However, modern browsers like Chrome have built-in support for the `dataset` property, which allows you to access and update custom properties on HTML elements. **Special JS Features or Syntax** There are no special JavaScript features or syntaxes being tested in this benchmark, as both approaches use standard language constructs (`.setAttribute()` vs. object assignment (`dataset.foo = ...`)). **Alternatives** If you need to test other attribute setting methods or custom property approaches, consider the following alternatives: * `getAttribute()` and `setAttribute()` variants: Some browsers have additional attributes like `getAttributeNames()` or `setAttributeNames()`, which can be useful for dynamic attribute management. * Other custom properties: Explore using other custom properties, such as `data-foo-bar` or `myCustomProperty`, to see how they perform in different scenarios. Keep in mind that the `dataset` property is a relatively new feature, and its support may vary across older browsers. If you need to support older browsers, you may want to consider alternative approaches.
Related benchmarks
getAttribute vs dataset
hasAttribute vs dataset
Check data attribute: hasAttribute vs dataset
hasAttribute vs getAttribute vs dataset
getAttribute vs dataset (without explicit loop)
Comments
Confirm delete:
Do you really want to delete benchmark?