Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
setAttribute vs dataset
(version: 0)
Benchmark.js
Compare setAttribute to dataset
Comparing performance of:
setAttribute vs dataset
Created:
5 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div id="foo"></div>
Tests:
setAttribute
var element = document.getElementById("foo"); var i = 10000; while (i--) { element.setAttribute("data-foo", `foo_${i}`); }
dataset
var element = document.getElementById("foo"); var i = 10000; while (i--) { element.dataset.foo = `foo_${i}`; }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
setAttribute
dataset
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
2 years ago
)
User agent:
Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:120.0) Gecko/20100101 Firefox/120.0
Browser/OS:
Firefox 120 on Ubuntu
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=487704" width="100%" height="500px"></iframe>
setAttribute
196/s
dataset
165/s
View exact numbers
Test name
Executions per second
✓
setAttribute
196 Ops/sec
dataset
165 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down what's being tested in this benchmark and the options being compared. **Benchmark Overview** The goal of this benchmark is to compare two ways of setting attribute values on an HTML element: using the `setAttribute` method or using the `dataset` property. The test case uses a simple scenario where we have 10,000 iterations to set attributes with increasing numbers (`foo_1`, `foo_2`, ..., `foo_10000`) on an HTML element with the id `foo`. **Options Being Compared** There are two options being compared: 1. **`setAttribute`**: This method sets a single attribute value directly on the element. ```javascript element.setAttribute("data-foo", `foo_${i}`); ``` 2. **`dataset` property**: This is an object-like property that allows you to store arbitrary key-value pairs on an HTML element. You can access and set these values using dot notation or bracket notation, similar to how you would access properties on a JavaScript object. ```javascript element.dataset.foo = `foo_${i}`; ``` **Pros and Cons** * **`setAttribute`**: + Pros: Simple, straightforward, and widely supported. + Cons: Can be slower due to the overhead of creating and manipulating attribute names. * **`dataset` property**: + Pros: More efficient, as it avoids the overhead of attribute name creation and manipulation. Also, it provides a convenient way to store and access key-value pairs. + Cons: May not be supported in older browsers or versions (although most modern browsers support it). **Library** The `dataset` property is part of the HTML5 specification, which introduces the `data-*` attributes for storing arbitrary key-value pairs on elements. The purpose of the `dataset` property is to provide a way to access and manipulate these values in a more convenient and flexible manner. **Special JS Feature or Syntax** None mentioned here, as both options use standard JavaScript syntax. **Other Alternatives** If you're looking for alternatives to the `dataset` property, some other options include: * Using a library like jQuery's `.data()` method * Implementing your own custom data storage solution (e.g., using a Map or an Object) * Using attributes with specific prefixes (e.g., `x-data-foo`) to create a pseudo-dataset However, it's worth noting that the `dataset` property is a widely supported and efficient way to store and access key-value pairs on HTML elements, making it a good choice for most use cases.
Related benchmarks
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?