Benchmark: Lopp over element attributes

HTML Preparation code:

<div id="test" one="one" two="two" three="three" four="four" five="five"></div>

Tests:

For loop
const element = document.querySelector('#test'); const length = element.attributes.length; for (let i = 0; i < length; i++) { const _attr = element.attributes[i]; }
ForEach
const element = document.querySelector('#test'); const attributes = [...element.attributes]; attributes.forEach(attr => { const _attr = attr; });
for of
const element = document.querySelector('#test'); for (const attr of element.attributes) { const _attr = attr; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
For loop
ForEach
for of

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

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

Browser/OS: Chrome 121 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
For loop	2415986.8 Ops/sec
ForEach	1072018.5 Ops/sec
for of	1210808.2 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 benchmarking test cases and explain what is being tested, the different approaches compared, their pros and cons, and other considerations.

**Benchmark Overview**

The benchmark measures the performance of three JavaScript loops for iterating over element attributes in an HTML element. The benchmark uses a fixed HTML template with multiple attribute-value pairs, and each loop is executed to count the number of attributes.

**Loops Compared**

1. **For Loop**: `for (let i = 0; i < length; i++) { const _attr = element.attributes[i]; }`
2. **ForEach**: `const attributes = [...element.attributes]; attributes.forEach(attr => { const _attr = attr; });`
3. **For of**: `for (const attr of element.attributes) { const _attr = attr; }`

**Pros and Cons**

* **For Loop**: This is a traditional, iterative loop that uses an index variable to access each attribute. Pros: straightforward, easy to understand. Cons: can be slow for large arrays, as the index calculation may introduce overhead.
* **ForEach**: This approach uses array methods to iterate over the attributes. Pros: concise, efficient, and modern syntax. Cons: may incur additional overhead due to function call and array creation.
* **For of**: This loop is a newer iteration mechanism introduced in ECMAScript 2015 (ES6). Pros: concise, easy to understand, and optimized for performance. Cons: not all browsers support this feature.

**Other Considerations**

* The benchmark uses Chrome 121 as the browser, which may affect the results due to its version-specific optimizations.
* The test is run on a desktop platform, which may differ from mobile or embedded systems.
* The operating system used is Mac OS X 10.15.7, which might impact performance due to its architecture and hardware.

**Libraries Used**

In this benchmark, no libraries are explicitly mentioned. However, it's worth noting that the `forEach` loop relies on the `Array.prototype.forEach()` method, which is a built-in function in JavaScript.

**Special JS Features or Syntax**

The **For of** loop uses a new iteration mechanism introduced in ES6, which allows for more concise and expressive code. This feature is widely supported by modern browsers, but older browsers might not execute it correctly or at all.

To get the most out of this benchmark, you can try:

* Using other browsers to see if the results vary.
* Testing on different devices (e.g., mobile, tablet) to understand platform-specific performance differences.
* Adjusting the HTML template or attribute count to simulate real-world scenarios.
* Experimenting with other loops, such as `while` or recursion, to compare their performance.

Related benchmarks:

Lopp over element attributes (version: 0)

Comparing performance of: For loop vs ForEach vs for of

Created: 2 years ago by: Guest

Jump to the latest result

For loop

ForEach

for of

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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