Benchmark: dataset set test

HTML Preparation code:

<h3 id="data" data-test="text">kipr202 header</h3>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>

Tests:

dataset set
window.onload = function() { document.querySelector("h3#data").dataset.test = "5"; }
setAttribute
window.onload = function() { document.querySelector("h3#data").setAttribute("test", "5"); }
jQuery .data()
$(document).ready(function() { $("h3#data").data("test", "5"); });
jQuery .attr()
$(document).ready(function() { $("h3#data").attr("data-test", "5"); });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
dataset set
setAttribute
jQuery .data()
jQuery .attr()

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):

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**What is being tested?**

The provided JSON represents four individual test cases, each testing a different approach to setting a custom attribute (or "dataset") on an HTML element using either native JavaScript or jQuery. The attributes being set are `data-test` and its corresponding value.

**Options compared:**

1. **Native JavaScript `.dataset` property**: This method uses the `dataset` property of an HTML element, which is a standardized API introduced in modern browsers (Chrome 76+).
2. **Native JavaScript `setAttribute()` function**: This method uses the `setAttribute()` function to set custom attributes on an HTML element.
3. **jQuery `.data()` method**: This method uses jQuery's `.data()` function to set custom data attributes on an HTML element.
4. **jQuery `.attr()` method**: This method uses jQuery's `.attr()` function to set custom attribute values on an HTML element.

**Pros and Cons of each approach:**

1. **Native JavaScript `.dataset` property**:
	* Pros: Fast, efficient, and standardized across browsers.
	* Cons: Requires modern browser support (Chrome 76+).
2. **Native JavaScript `setAttribute()` function**:
	* Pros: Widely supported across browsers, doesn't require modern browser support.
	* Cons: Can be slower than other methods due to security restrictions on setting attributes dynamically.
3. **jQuery `.data()` method**:
	* Pros: Fast and efficient in jQuery's context, widely adopted, and works in older browsers.
	* Cons: Requires jQuery library inclusion, which may add unnecessary overhead.
4. **jQuery `.attr()` method**:
	* Pros: Wide adoption and support across browsers, easy to use.
	* Cons: May be slower than other methods due to the need to parse attribute names.

**Library and purpose:**

The provided benchmark uses jQuery (version 3.5.1) as a dependency, which is a popular JavaScript library for DOM manipulation and event handling.

**Special JS feature or syntax:**

None of the benchmarked approaches use any special JavaScript features or syntax that are not widely supported. They all rely on standard APIs and functions.

**Other alternatives:**

If none of these methods are suitable for your use case, you may consider alternative approaches such as:

1. Using CSS classes to store data (e.g., `class="data-test"`).
2. Utilizing HTML5 attribute value parsing and manipulation libraries like `attr-parser`.
3. Implementing custom solutions using Web Storage or other client-side storage mechanisms.

Keep in mind that each approach has its own trade-offs, and the best choice depends on your specific requirements, performance constraints, and target browser support.

Related benchmarks:

dataset set test (version: 0)

Comparing performance of: dataset set vs setAttribute vs jQuery .data() vs jQuery .attr()

Created: 4 years ago by: Guest

Jump to the latest result

dataset set

setAttribute

jQuery .data()

jQuery .attr()

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):