Benchmark: hasAttribute vs dataset

HTML Preparation code:

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

Tests:

hasAttribute
var element = document.getElementById("foo"); var i = 10000; while (i--) { var foo = element.hasAttribute("data-foo"); }
dataset
var element = document.getElementById("foo"); var i = 10000; while (i--) { var foo = element.dataset.foo; }

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: 3 months ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36

Browser/OS: Chrome 143 on Linux

View result in a separate tab

Test name	Executions per second
hasAttribute	2297.4 Ops/sec
dataset	810.3 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what is being tested.

**Benchmark Overview**

The benchmark compares two approaches to access the `data-foo` attribute on an HTML element:

1. Using `setAttribute` with `hasAttribute`: This approach involves setting the `data-foo` attribute using `setAttribute`, followed by checking if it exists using `hasAttribute`.
2. Using a data property (dataset): This approach directly accesses the `data-foo` value as a property of the `element` object.

**Options Compared**

The benchmark tests two options:

1. **hasAttribute**: This option uses `setAttribute` to set the attribute and then checks if it exists using `hasAttribute`.
2. **Dataset**: This option directly accesses the `data-foo` value as a property of the `element` object, without using `setAttribute`.

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

* **hasAttribute**:
	+ Pros: Simple, straightforward, and widely supported.
	+ Cons: Can be slower due to the extra step of setting the attribute and then checking for its existence. Additionally, this method can lead to unnecessary attribute creation and updates if used in a loop.
* **Dataset**:
	+ Pros: Faster, as it directly accesses the property without creating or updating an attribute.
	+ Cons: May not work consistently across older browsers or versions of JavaScript that don't support data properties.

**Library/Tool Usage**

There is no external library or tool being used in this benchmark. The code relies solely on standard JavaScript and HTML APIs.

**Special JS Features/Syntax**

The benchmark does not use any special JavaScript features or syntax, such as `async/await`, `try-catch`, or modern ECMAScript syntax (e.g., `let`, `const`, arrow functions).

**Other Alternatives**

If the benchmark were to test alternative approaches, some possible options could include:

* Using a library like Lodash or Underscore.js for utility functions (e.g., `_.has`).
* Implementing a custom solution using a different data storage mechanism, such as an object or a DOM-based attribute array.
* Testing other property access methods, like `getAttribute()` and `setAttribute()`, alongside the dataset approach.

Keep in mind that these alternatives would require changes to the benchmark code and might not be directly comparable to the original test cases.

Related benchmarks:

hasAttribute vs dataset (version: 0)

Compare setAttribute to dataset

Comparing performance of: hasAttribute vs dataset

Created: 2 years ago by: Guest

Jump to the latest result

hasAttribute

dataset

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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