Benchmark: test setAttribute vs dataset

HTML Preparation code:

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

Script Preparation code:

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

Tests:

getAttribute
let i = 1000; while(i--) element.setAttribute("data-foo", "foo_id_new_"+i);
dataset
let i = 1000; while(i--) element.dataset.foo ="foo_id_new_"+i;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
getAttribute
dataset

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36

Browser/OS: Chrome 125 on Windows

View result in a separate tab

Test name	Executions per second
getAttribute	596.6 Ops/sec
dataset	537.4 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what's being tested in the provided JSON benchmark.

**Benchmark Overview**

The benchmark compares two approaches to set or update an attribute on an HTML element:

1. `setAttribute`: This method sets the specified attribute to the specified value.
2. `dataset` (also known as "data-attribute" or "dataset property"): This is a custom property added to HTML elements in modern browsers, allowing you to store and retrieve data in a more concise way.

**Options Compared**

The benchmark tests two options:

1. **`setAttribute`**: Sets the attribute directly using the `setAttribute()` method.
2. **`dataset.foo`**: Updates the value of the `foo` property within the `dataset` object, which is accessed like an object property.

**Pros and Cons of Each Approach**

* `setAttribute`:
	+ Pros: Simple, widely supported, and easy to understand.
	+ Cons: Can be slower than other approaches due to the overhead of creating a new attribute and parsing it.
* `dataset.foo`:
	+ Pros: More concise, faster (in some cases), and more modern approach.
	+ Cons: Requires modern browsers that support the `dataset` property. May not work in older browsers.

**Other Considerations**

When working with attributes or custom properties like `dataset`, keep the following points in mind:

* **Attribute naming conventions**: Use valid attribute names, avoiding special characters and reserved keywords.
* **Case sensitivity**: Some browsers may be case-sensitive when setting or retrieving attributes, so consider using camelCase or lowercase for attribute names.
* **Browser support**: Make sure to test your code across various browser versions and devices.

**Library Used**

None is explicitly mentioned in the benchmark JSON. However, modern browsers like Chrome have built-in support for the `dataset` property, which allows you to access and update custom properties on HTML elements.

**Special JS Features or Syntax**

There are no special JavaScript features or syntaxes being tested in this benchmark, as both approaches use standard language constructs (`.setAttribute()` vs. object assignment (`dataset.foo = ...`)).

**Alternatives**

If you need to test other attribute setting methods or custom property approaches, consider the following alternatives:

* `getAttribute()` and `setAttribute()` variants: Some browsers have additional attributes like `getAttributeNames()` or `setAttributeNames()`, which can be useful for dynamic attribute management.
* Other custom properties: Explore using other custom properties, such as `data-foo-bar` or `myCustomProperty`, to see how they perform in different scenarios.

Keep in mind that the `dataset` property is a relatively new feature, and its support may vary across older browsers. If you need to support older browsers, you may want to consider alternative approaches.

Related benchmarks:

test setAttribute vs dataset (version: 0)

Compare setAttribute to dataset (not getAttribute)

Comparing performance of: getAttribute vs dataset

Created: 3 years ago by: Guest

Jump to the latest result

getAttribute

dataset

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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