Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
getAttribute vs dataset 2
(version: 0)
Benchmark.js
Compare setAttribute to dataset
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
var i = 10000; while (i--) { var foo = element.getAttribute("data-foo"); }
dataset
var i = 10000; while (i--) { var foo = element.dataset.foo; }
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:
one month ago
)
User agent:
Mozilla/5.0 (X11; Linux x86_64; rv:153.0) Gecko/20100101 Firefox/153.0
Browser/OS:
Firefox 153 on Linux
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=633692" width="100%" height="500px"></iframe>
getAttribute
189K/s
dataset
1K/s
View exact numbers
Test name
Executions per second
✓
getAttribute
189,370 Ops/sec
dataset
1,436 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the provided benchmark JSON and analyze what's being tested. **Benchmark Purpose:** MeasureThat.net is testing two approaches for accessing data attributes in HTML elements: 1. `setAttribute`: A method to set the value of an attribute on an element. 2. `.dataset` property: A read-only property that returns a dictionary-like object containing the element's attributes, including data attributes. **Options Compared:** The benchmark compares the performance of using `setAttribute` versus accessing data attributes through the `.dataset` property. These two approaches have different implications for code readability, maintenance, and potential security concerns. **Pros and Cons of Each Approach:** **`setAttribute`:** Pros: * Can be more explicit and readable when setting attribute values. * May be faster since it directly manipulates the element's attributes. Cons: * Can lead to unexpected behavior or security vulnerabilities if not used correctly (e.g., using `setAttribute` with untrusted input). * May not work as expected in some scenarios, such as when accessing data attributes through a `.dataset` property. **`.dataset`:** Pros: * Provides a more modern and standardized way of accessing data attributes. * Reduces the risk of security vulnerabilities since it does not directly manipulate the element's attributes. * Can be more readable and maintainable for complex attribute configurations. Cons: * May have performance implications, as accessing `.dataset` involves creating a dictionary-like object. * Not all browsers support or implements the `.dataset` property correctly (e.g., older versions of Internet Explorer). **Library Used:** In this benchmark, no specific library is required to access `.dataset`, as it's a built-in property of HTML elements. However, some libraries might provide additional functionality or polyfills for older browsers that don't support `.dataset`. **Special JS Feature/Syntax:** The benchmark uses the `while` loop with a decrementing variable (`i--`) and an immediate invoked function expression (IIFE) to execute the test code. This is a standard JavaScript syntax, but it's worth noting that some modern engines might optimize or rewrite such constructs for better performance. **Alternative Approaches:** Other alternatives to accessing data attributes could include: * Using `getAttribute` with a specific attribute name (e.g., `element.getAttribute('data-foo')`) instead of the `.dataset` property. * Utilizing CSS classes or other styling mechanisms to store and retrieve data attributes. * Implementing custom solutions using libraries like jQuery or vanilla JavaScript functions. Keep in mind that each approach has its trade-offs, and the choice ultimately depends on the specific requirements of your application.
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?