Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
for loop tests
(version: 0)
Comparing performance of:
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:
for
let elements = document.getElementsByClassName('element'); let l = elements.length; for (let i = 0; i < l; i++) { elements[i].classList.add('test'); }
for of
let elements = document.getElementsByClassName('element'); for (let el of elements) { el.classList.add('test'); }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
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 benchmark and explain what's being tested, the different approaches compared, their pros and cons, and other considerations. **Benchmark Definition:** The benchmark measures the performance of JavaScript for loops in two different contexts: 1. Using `let elements = document.getElementsByClassName('element');` to get a NodeList, then iterating over it using a traditional `for` loop. 2. Using `let elements = document.getElementsByClassName('element');` to get a NodeList, then iterating over it using an iterable context (`for...of`) loop. **Individual Test Cases:** Each test case has the following components: * **Benchmark Definition:** A JavaScript code snippet that sets up a benchmark. For the first test case, it gets all elements with class `element`, stores them in a NodeList, and then iterates over it using a traditional `for` loop. The second test case is similar, but uses an iterable context (`for...of`) loop to iterate over the NodeList. * **Test Name:** A descriptive name for each test case. **Options Compared:** The benchmark compares two different approaches: 1. Traditional `for` loop iteration (using a traditional `for` loop) 2. Iterable context (`for...of`) loop iteration (using an iterable context) **Pros and Cons:** * **Traditional `for` Loop:** + Pros: - Easy to understand and implement - Can be optimized for specific use cases (e.g., array iteration) + Cons: - Less efficient than other methods, especially for large datasets - May not handle edge cases well * **Iterable Context (`for...of`) Loop:** + Pros: - More efficient and scalable than traditional `for` loops - Handles edge cases better (e.g., empty arrays) + Cons: - Less intuitive for beginners, as it uses a different syntax - May require additional setup (e.g., defining the iterable) **Other Considerations:** * **Browser Support:** The benchmark runs in Chrome 62 on Windows 7. Other browsers and OS may exhibit different performance characteristics. * **NodeList vs. Array:** NodeLists are used in this benchmark, but it's worth noting that Arrays have similar methods for iteration (e.g., `forEach`) which might be more efficient or convenient in certain situations. **Other Alternatives:** If you're interested in exploring other iteration methods, consider the following: * **`forEach()` method:** An array-based iteration method that can provide better performance and flexibility. * **Iterators and Generators:** More advanced techniques for creating custom iterators and generators, which can lead to more efficient and flexible iteration. Keep in mind that the specific use case and requirements will dictate the best approach. This benchmark provides a starting point for comparing different iteration methods, but it's essential to consider your specific needs and optimize accordingly.
Related benchmarks:
querySelectorAll vs getElementsByClassName iteration
loop performance test
querySelector vs getElementsByClassName _2 (Get first element)
querySelectorAll vs. getElementsByClassName x 10
Comments
Confirm delete:
Do you really want to delete benchmark?