Benchmark: setAttribute vs direct vs []

HTML Preparation code:

<textbox id="text"></textbox>

Tests:

setAttribute
var element = document.getElementById("text"); var i = 10000; while (i--) { element.setAttribute("value", i); }
direct
var element = document.getElementById("text"); var i = 10000; while (i--) { element.value = i; }
[]
var element = document.getElementById("text"); var i = 10000; while (i--) { element["value"] = i; }

Historical Performance Data aggregated from 10 community runs

Desktop Results:

Firefox 5 runs

[]

96K/s

direct

95K/s

setAttribute

295/s

Fastest: [] (325.3x faster)

View exact numbers

✓ []: 96,015 ops/sec
• direct: 95,086 ops/sec
• setAttribute: 295 ops/sec

Chrome 5 runs

direct

262K/s

[]

260K/s

setAttribute

562/s

Fastest: direct (466.4x faster)

View exact numbers

✓ direct: 262,316 ops/sec
• []: 259,661 ops/sec
• setAttribute: 562 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
direct
[]

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 months ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:151.0) Gecko/20100101 Firefox/151.0

Browser/OS: Firefox 151 on Windows

View result in a separate tab

direct

69K/s

[]

51K/s

setAttribute

196/s

View exact numbers

Test name	Executions per second
✓ direct	69,290 Ops/sec
[]	51,443 Ops/sec
setAttribute	196 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 benchmark and explain what's being tested.

**Benchmark Purpose:**
The benchmark measures the performance of three different approaches to setting the value of an HTML input element:

1. `setAttribute`
2. Direct assignment (`element.value = i`)
3. Property access with square brackets (`element["value"] = i`)

**Options Comparison:**

* **`setAttribute`**: This method uses the `setAttribute` method to set the value attribute of the input element. It takes two arguments: the attribute name and the value.
* **Direct Assignment**: This method assigns the value directly to the `value` property of the input element.
* **Property Access with Square Brackets**: This method accesses the `value` property of the input element using square brackets (`[]`). The syntax is `element["value"] = i`.

**Pros and Cons:**

* **`setAttribute`**:
	+ Pros: Can be used to set any attribute on an element, not just the value.
	+ Cons: May be slower due to the method call overhead.
* **Direct Assignment**: Fastest way to set a property directly on an object.
* **Property Access with Square Brackets**: Similar to direct assignment, but may incur additional overhead due to the bracket notation.

**Library and Syntax:**
None of the options require any external libraries or special JavaScript features. They are all basic syntax for working with HTML elements in JavaScript.

**Other Considerations:**

* In modern browsers, the `value` property is a setter function that calls the `setAttribute` method internally. This means that direct assignment (`element.value = i`) may be equivalent to `setAttribute` in terms of performance.
* Property access with square brackets (`element["value"] = i`) can be slower due to the overhead of resolving the bracket notation.

**Benchmark Results:**
The benchmark results show that:

* Direct assignment (`element.value = i`) is the fastest approach, followed closely by property access with square brackets (`element["value"] = i`).
* `setAttribute` is the slowest approach.

Keep in mind that these results may vary depending on the specific browser, version, and hardware configuration.

setAttribute vs direct vs [] (version: 0) Benchmark.js

Comparing performance of: `setAttribute vs direct vs []`

Created: 2 years ago by: Guest

Go to the latest result

setAttribute

direct

[]

Historical Performance Data aggregated from 10 community runs

Desktop Results:

Firefox 5 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 direct vs [] (version: 0) Benchmark.js

Comparing performance of: setAttribute vs direct vs []

Created: 2 years ago by: Guest

Go to the latest result

setAttribute

direct

[]

Historical Performance Data aggregated from 10 community runs

Desktop Results:

Firefox 5 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 direct vs []`