Benchmark: setAttribute vs. dataset vs. direct

HTML Preparation code:

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

Tests:

setAttribute
var element = document.getElementById("foo"); var i = 1000; while (i--) { element.setAttribute("foo", "bar"); }
dataset
var element = document.getElementById("foo"); var i = 1000; while (i--) { element.dataset.foo = 'bar'; }
direct
var element = document.getElementById("foo"); var i = 1000; while (i--) { element.foo = 'bar'; }

Historical Performance Data aggregated from 13 community runs

Desktop Results:

Firefox 8 runs

direct

372K/s

setAttribute

7K/s

dataset

4K/s

Fastest: direct (101.0x faster)

View exact numbers

✓ direct: 371,809 ops/sec
• setAttribute: 6,890 ops/sec
• dataset: 3,680 ops/sec

Chrome 5 runs

direct

1.4M/s

setAttribute

12K/s

dataset

6K/s

Fastest: direct (222.8x faster)

View exact numbers

✓ direct: 1,368,314 ops/sec
• setAttribute: 11,691 ops/sec
• dataset: 6,141 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
setAttribute
dataset
direct

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

Browser/OS: Chrome 135 on Mac OS X 10.15.7

View result in a separate tab

direct

1.4M/s

setAttribute

16K/s

dataset

7K/s

View exact numbers

Test name	Executions per second
✓ direct	1,368,314 Ops/sec
setAttribute	15,978 Ops/sec
dataset	6,984 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's being tested.

**Benchmark Overview**

The benchmark is comparing three ways to set the value of an HTML element's `foo` attribute: setting it directly, using the `dataset` property, and using the `setAttribute` method. The goal is to determine which approach is the fastest.

**Options Compared**

1. **Direct Setting**: This involves using the dot notation (`element.foo = 'bar';`) to set the value of the `foo` attribute directly on the element.
2. **Dataset Property**: This uses the `dataset` property (a part of the HTML5 specification) to set the value of an attribute without having to use the `setAttribute` method.
3. **setAttribute Method**: This involves using the `setAttribute` method (`element.setAttribute('foo', 'bar');`) to set the value of the `foo` attribute.

**Pros and Cons**

* **Direct Setting**:
	+ Pros: Simple, intuitive, and widely supported.
	+ Cons: May not be as efficient or optimized as other methods.
* **Dataset Property**:
	+ Pros: Efficient, modern, and part of HTML5 specification. Reduces the need for additional libraries or plugins.
	+ Cons: Not all browsers support it out-of-the-box, and some older browsers may have limitations or issues with it.
* **setAttribute Method**:
	+ Pros: Widely supported across various browsers and versions.
	+ Cons: May be slower than other methods due to the overhead of invoking a method.

**Library/Functionality**

In this benchmark, there is no explicit library being tested. However, the `dataset` property is an HTML5 feature that is widely supported by modern browsers.

**Special JS Feature/Syntax**

There is no special JavaScript feature or syntax being used in this benchmark. It's standard JavaScript code using basic syntax and semantics.

**Alternative Approaches**

If you're interested in exploring alternative approaches to setting attribute values, here are a few:

1. **Custom Property**: You can use the `customProperties` API (also part of HTML5) to set custom properties on an element.
2. **getAttribute/setAttribute Pairing**: Some browsers have optimized the `getAttribute` and `setAttribute` methods for certain use cases. For example, some versions of Chrome use a "cache" to store attribute values that can reduce overhead when setting or getting attributes.

Keep in mind that these alternatives may not be as widely supported or efficient as the approaches being tested in this benchmark.

setAttribute vs. dataset vs. direct (version: 0)

Comparing performance of: `setAttribute vs dataset vs direct`

Created: 3 years ago by: Guest

Go to the latest result

setAttribute

dataset

direct

Historical Performance Data aggregated from 13 community runs

Desktop Results:

Firefox 8 runs

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

setAttribute vs. dataset vs. direct (version: 0)

Comparing performance of: setAttribute vs dataset vs direct

Created: 3 years ago by: Guest

Go to the latest result

setAttribute

dataset

direct

Historical Performance Data aggregated from 13 community runs

Desktop Results:

Firefox 8 runs

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `setAttribute vs dataset vs direct`