Benchmark: get all element's attributes

HTML Preparation code:

<a id="id" class="button" href="/"></a>

Script Preparation code:

var el = document.getElementById('id')

Tests:

getAttributeNames method
for (var name of el.getAttributeNames()) { name + ':' + el.getAttribute(name) }
attributes property
for(var attr of el.attributes) { attr.name + ':' + attr.value }
getAttributeNames method no action
for (var name of el.getAttributeNames()) { }
attributes property no action
for(var attr of el.attributes) { }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
getAttributeNames method
attributes property
getAttributeNames method no action
attributes property no action

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 4 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
getAttributeNames method	4405297.0 Ops/sec
attributes property	1163230.6 Ops/sec
getAttributeNames method no action	8083761.0 Ops/sec
attributes property no action	1440394.1 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:

**Script Preparation Code and Html Preparation Code**

The script preparation code is used to prepare the JavaScript environment for the benchmark:
```javascript
var el = document.getElementById('id')
```
This line retrieves an HTML element with the id "id" using the `document.getElementById()` method.

The html preparation code defines the HTML structure that will be used as input for the benchmark:
```html
<a id="id" class="button" href="/"></a>
```
This is a simple HTML anchor element with an id of "id".

**Test Cases**

There are four test cases:

1. **getAttributeNames method**: This test case checks the performance of the `getattrNames()` method, which returns an array of attribute names for an element.
```javascript
for (var name of el.getAttributeNames()) {
  name + ':' + el.getAttribute(name)
}
```
This test case iterates over each attribute name and then retrieves its value using `el.getAttribute(name)`.

2. **attributes property**: This test case checks the performance of accessing the `attributes` property, which returns a DOM AttrCollection object.
```javascript
for(var attr of el.attributes) {
  attr.name + ':' + attr.value
}
```
This test case iterates over each attribute in the element's attributes collection and then retrieves its name and value.

3. **getAttributeNames method no action**: This test case is similar to the first one, but without executing any code inside the loop.
```javascript
for (var name of el.getAttributeNames()) {
}
```
This test case only iterates over each attribute name, but doesn't retrieve its value.

4. **attributes property no action**: This test case is similar to the second one, but without executing any code inside the loop.
```javascript
for(var attr of el.attributes) {
}
```
This test case only iterates over each attribute in the element's attributes collection, but doesn't retrieve its name and value.

**Benchmark Results**

The latest benchmark results show the performance metrics for each test case on a Firefox 99 browser running on Linux:

* `getAttributeNames method no action`: 2534874.5 executions per second
* `attributes property no action`: 2020045.0 executions per second
* `getAttributeNames method`: 1787968.875 executions per second
* `attributes property`: 1363230.125 executions per second

**Library: DOM (Document Object Model)**

The test cases rely on the Document Object Model (DOM) API, which provides a way to interact with HTML and XML documents in JavaScript.

In this case, the `document.getElementById()` method is used to retrieve an element by its id, while the `getAttributeNames()` and `attributes` properties are used to access attribute information about that element.

**Special JS Features: None**

There are no special JavaScript features or syntax used in these test cases. They only rely on standard DOM API methods and properties.

**Alternatives**

Other alternatives for testing performance benchmarks could include:

* Using different browsers, such as Chrome or Safari
* Testing with different HTML structures or attributes
* Using a different DOM implementation, such as Puppeteer or Selenium
* Adding more complex logic to the test cases, such as event handling or animations

Related benchmarks:

get all element's attributes (version: 1)

Comparing performance of: getAttributeNames method vs attributes property vs getAttributeNames method no action vs attributes property no action

Created: 4 years ago by: Registered User

Jump to the latest result

getAttributeNames method

attributes property

getAttributeNames method no action

attributes property no action

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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