Benchmark: Property vs. attribute

HTML Preparation code:

<div id="container"></div>

Script Preparation code:

var el = document.createElement('a');
el.textContent = 'test';
el.setAttribute('href', 'http://test.de')
el.setAttribute('data-test-id', '123')
el.setAttribute('id', 'test')
el['testId'] = '123'
document.getElementById('container').appendChild(el)

Tests:

getAttribute
var i = 10000; while (i--) { document.getElementById('test').getAttribute('data-test-id') }
get property
var i = 10000; while (i--) { document.getElementById('test').testId }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
getAttribute
get property

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/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
getAttribute	2604.2 Ops/sec
get property	4480.9 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 its test cases to understand what is being tested.

**Benchmark Overview**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks. The benchmark in question compares two approaches: accessing a property (e.g., `testId`) versus accessing an attribute (e.g., `getAttribute('data-test-id')`) of an HTML element.

**Test Cases**

There are two test cases:

1. **"getAttribute"`:
	* Benchmark Definition: `var i = 10000; while (i--) { document.getElementById('test').getAttribute('data-test-id') }`
	* Test Name: "get attribute"
2. **"get property"`:
	* Benchmark Definition: `var i = 10000; while (i--) { document.getElementById('test').testId }`
	* Test Name: "get property"

**Options Compared**

The two test cases compare the performance of accessing a property (`testId`) versus accessing an attribute (`getAttribute('data-test-id')`) of an HTML element.

**Pros and Cons**

* **Accessing a Property (e.g., `testId`)**:
	+ Pros:
		- Typically faster, as it involves a simple property lookup.
		- May be more cache-friendly, as the property value is stored in memory.
	+ Cons:
		- Requires access to the DOM object, which can introduce additional overhead.
		- May not work as expected if the property value is changed dynamically.
* **Accessing an Attribute (e.g., `getAttribute('data-test-id')`)**:
	+ Pros:
		- Can be more flexible, as it allows for dynamic attribute lookup.
		- Works even if the attribute value is changed dynamically.
	+ Cons:
		- Typically slower, as it involves a DOM query and attribute retrieval.
		- May involve additional overhead due to DOM object creation.

**Library Used**

None. This benchmark only uses native JavaScript functionality.

**Special JS Feature/Syntax**

No special JavaScript features or syntax are used in these test cases.

**Other Considerations**

When accessing attributes, consider the following:

* The `getAttribute()` method can be slower than accessing properties because it involves an additional DOM query.
* If the attribute value is changed dynamically, using `getAttribute()` may not work as expected.

**Alternatives**

If you need to access attributes or need more flexibility in your attribute lookup, consider using a library like jQuery or a framework-specific API. However, for simple cases where performance is critical and attribute values are static, accessing properties may be the preferred approach.

Keep in mind that these test cases are designed to compare the performance of two specific approaches, so it's essential to understand the trade-offs between property access and attribute access in your own code.

Related benchmarks:

Property vs. attribute (version: 1)

Comparing performance of: getAttribute vs get property

Created: 7 years ago by: Registered User

Jump to the latest result

getAttribute

get property

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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