Benchmark: Check data attribute: hasAttribute vs dataset

HTML Preparation code:

<div id="foo" data-foo></div>

Script Preparation code:

var element = document.getElementById("foo");

Tests:

hasAttribute
var foo = element.hasAttribute("data-foo");
dataset
var foo = "foo" in element.dataset;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
hasAttribute
dataset

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month ago)

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 18_3_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/134.0.6998.99 Mobile/15E148 Safari/604.1

Browser/OS: Chrome Mobile iOS 134 on iOS 18.3.2

View result in a separate tab

Test name	Executions per second
hasAttribute	19405950.0 Ops/sec
dataset	9333133.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months 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 benchmark compares two ways to check if an element has a specific attribute or data property: `hasAttribute` and `in dataset`. Specifically, it tests whether `element.hasAttribute("data-foo")` is faster than `element["dataset"] == "foo"` (or simply `"foo" in element.dataset`) for the case where the element has a `data-foo` attribute.

**Options compared:**

There are two options being compared:

1. **hasAttribute**: This method checks if an element has a specific attribute by calling the `getAttribute()` method and checking if the returned value is truthy.
2. **in dataset**: This method uses the `in` operator to check if a property exists in the `dataset` object of an element.

**Pros and Cons:**

1. **hasAttribute**:
	* Pros: Simple, lightweight, and widely supported by browsers.
	* Cons: May involve additional overhead due to attribute lookup, as `getAttribute()` must be called and then checked for truthiness.
2. **in dataset**:
	* Pros: Can be more efficient than `hasAttribute`, as it only requires a single property access and does not require an extra call to `getAttribute()`.
	* Cons: May not work in older browsers that do not support the `dataset` object or its syntax.

**Other considerations:**

* **Library usage**: The benchmark uses the `element` object, which is likely part of the DOM API. In this case, no library is explicitly used.
* **Special JS features/syntax**: No special JavaScript features or syntax are used in these test cases (e.g., async/await, arrow functions, etc.).

**Alternatives:**

If you're interested in testing other methods for checking attributes or data properties, you could consider adding new benchmark definitions with the following alternatives:

* Using `element.getAttribute("data-foo") === "foo"` instead of `hasAttribute`
* Using `Object.prototype.hasOwnProperty.call(element.dataset, "foo")` instead of `in dataset`
* Using a library like Lodash's `get()` method or a custom implementation for attribute checking

Keep in mind that these alternatives might have different performance characteristics and may require additional setup or modifications to the benchmark.

Related benchmarks:

Check data attribute: hasAttribute vs dataset (version: 0)

Compare hasAttribute to in dataset

Comparing performance of: hasAttribute vs dataset

Created: one year ago by: Guest

Jump to the latest result

hasAttribute

dataset

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):