Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
JavaScript Parsing HTML5 data Attributes
(version: 0)
https://www.sitepoint.com/use-html5-data-attributes/
Comparing performance of:
getAttribute and setAttribute vs jQuery data() method vs HTML5 dataset API
Created:
5 years ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script> <div id="msglist" data-user="bob" data-list-size="5" data-maxage="180"></div>
Tests:
getAttribute and setAttribute
var msglist = document.getElementById("msglist"); var show = msglist.getAttribute("data-list-size"); msglist.setAttribute("data-list-size", +show+3);
jQuery data() method
var msglist = $("#msglist"); var show = msglist.data("list-size"); msglist.data("list-size", +show+3);
HTML5 dataset API
var msglist = document.getElementById("msglist"); var show = msglist.dataset.listSize; msglist.dataset.listSize = +show+3;
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
getAttribute and setAttribute
jQuery data() method
HTML5 dataset API
Fastest:
N/A
Slowest:
N/A
Latest run results:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the benchmark and explain what's being tested. **Benchmark Overview** The benchmark is designed to measure the performance of three different approaches for accessing and modifying HTML5 data attributes in JavaScript: 1. `getAttribute` and `setAttribute` (standard DOM method) 2. jQuery's `data()` method 3. HTML5 dataset API **Options Being Compared** Each test case uses a different approach to access and modify the `data-list-size` attribute of an HTML element. * Test Case 1: `getAttribute` and `setAttribute` + Uses standard DOM methods to access and modify the attribute value. * Test Case 2: jQuery's `data()` method + Uses jQuery's `data()` method to access and modify the attribute value. This method is a convenience wrapper around the standard DOM methods. * Test Case 3: HTML5 dataset API + Uses the HTML5 dataset API (also known as "attributes" or "custom attributes") to access and modify the attribute value. **Pros and Cons of Each Approach** Here's a brief summary of the pros and cons of each approach: * `getAttribute` and `setAttribute`: This method is widely supported by all modern browsers, but it can be slower than other methods because it involves an extra DOM lookup. + Pros: Wide browser support, simple to implement. + Cons: Can be slow, may require additional DOM lookups. * jQuery's `data()` method: This method provides a convenient wrapper around the standard DOM methods, but it relies on jQuery being included in the page. Additionally, this method may not be as fast as using the standard DOM methods directly. + Pros: Convenient, easy to use, does not require additional library includes. + Cons: Requires jQuery, may be slower than direct DOM methods. * HTML5 dataset API: + Pros: Fast, modern and widely supported by most browsers (except for some older versions). + Cons: Not as widely supported as standard DOM methods or jQuery's `data()` method. **Library Used** In this benchmark, the `getAttribute` and `setAttribute` methods are used directly in the JavaScript code. The third test case uses jQuery's library to access and modify the attribute value. No other libraries are required besides jQuery for Test Case 2. **Special JS Features or Syntax** None of the test cases use any special JavaScript features or syntax beyond what is standard for modern web browsers. However, it's worth noting that some older versions of Internet Explorer may not support the HTML5 dataset API, which could affect performance in those browsers. **Other Alternatives** If you're interested in optimizing your own code for accessing and modifying data attributes, here are a few alternative approaches: * Using `dataset` property: Instead of using `getAttribute` and `setAttribute`, you can access data attributes using the `dataset` property. For example, `var show = msglist.dataset.listSize;`. * Using `DOMTokenList`: The HTML5 DOMTokenList API provides a more efficient way to manipulate data attributes by allowing you to set multiple attribute values at once. Note that these alternatives may not provide significant performance improvements unless you're working with large datasets or optimized for specific use cases.
Related benchmarks:
native find vs lodash _.find vs ramda
native reverse find vs lodash _.findLast
concat test
reverse vs lodash vs native
native reverse find vs findLast
Comments
Confirm delete:
Do you really want to delete benchmark?