Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
Lopp over element attributes
(version: 0)
Benchmark.js
Comparing performance of:
For loop vs ForEach vs for of
Created:
2 years ago
by:
Guest
Go to the latest result
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>
Run tests (3)
Previous results
Fork
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
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=503905" width="100%" height="500px"></iframe>
For loop
2.4M/s
for of
1.2M/s
ForEach
1.1M/s
View exact numbers
Test name
Executions per second
✓
For loop
2,415,987 Ops/sec
for of
1,210,808 Ops/sec
ForEach
1,072,018 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
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
querySelectorAll data attribute vs class name
querySelectorAll data attribute without value consideration vs class name
Comments
Confirm delete:
Do you really want to delete benchmark?