Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
loop performance test
(version: 0)
Comparing performance of:
foreach vs classic for vs for of
Created:
7 years ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<div class="wrapper"> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> </div>
Tests:
foreach
let elements = document.querySelectorAll('.element'); elements.forEach(function (value) { value.classList.add('test'); });
classic for
let elements = document.querySelectorAll('.element'); for (let i = 0; i < elements.length; i++) { elements[i].classList.add('test'); }
for of
let elements = document.querySelectorAll('.element'); for (let el of elements) { el.classList.add('test'); }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
foreach
classic for
for of
Fastest:
N/A
Slowest:
N/A
Latest run results:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
I'll break down the provided benchmark and its test cases to explain what's being tested, compared options, pros and cons, and other considerations. **Benchmark Definition:** The benchmark definition is a JavaScript snippet that creates an array of HTML elements using `document.querySelectorAll('.element')`. The goal of this benchmark is to measure the performance of three different iteration methods: 1. `forEach` loop 2. Classic `for` loop 3. `for...of` loop **Individual Test Cases:** Each test case has a unique name and a corresponding JavaScript snippet that implements one of the above iteration methods. * **`foreach`**: This test case uses the `forEach` loop, which iterates over an array using the callback function provided. ```javascript let elements = document.querySelectorAll('.element'); elements.forEach(function (value) { value.classList.add('test'); }); ``` **Classic For Loop:** This test case uses a traditional `for` loop to iterate over the array of HTML elements: ```javascript let elements = document.querySelectorAll('.element'); for (let i = 0; i < elements.length; i++) { elements[i].classList.add('test'); } ``` **For Of Loop:** This test case uses the `for...of` loop, which is a newer iteration method that iterates over arrays using the values: ```javascript let elements = document.querySelectorAll('.element'); for (let el of elements) { el.classList.add('test'); } ``` **Comparison and Considerations:** The benchmark compares the performance of these three iteration methods: * **`forEach` loop**: This method is generally considered more concise and readable, as it allows for a single statement to iterate over an array. However, it may incur overhead due to the callback function. * **Classic `for` loop**: This traditional approach provides direct access to the index variable `i`, but it requires more boilerplate code and can be less efficient than newer iteration methods. * **For Of Loop**: This method is often considered more modern and concise, as it allows for a single statement to iterate over an array. However, its performance may vary depending on the browser implementation. In terms of pros and cons: Pros: * **`for...of` loop**: More concise and readable code, potentially better performance in newer browsers. * **Classic `for` loop**: Provides direct access to the index variable `i`, potentially suitable for specific use cases. Cons: * **`forEach` loop**: May incur overhead due to the callback function. * **For Of Loop**: Performance may vary depending on the browser implementation. **Benchmark Results:** The latest benchmark results show that: * The **`classic for` loop** performs best, with an execution rate of 23125.78125 executions per second (Chrome 71 on Mac OS X 10.14.2). * The **`forEach` loop** performs the worst, with an execution rate of 17653.4609375 executions per second. * The **`for...of` loop** falls in between, with an execution rate of 15481.0283203125 executions per second. Keep in mind that these results may vary depending on the specific browser implementation, system configuration, and other factors.
Related benchmarks:
querySelectorAll vs getElementsByClassName iteration
for loop tests
querySelector and getElementsByClassName performance
querySelectorAll vs getElementsByClassName naid iteration
Comments
Confirm delete:
Do you really want to delete benchmark?