Benchmark: for lef of OR for var of OR for var length - v3

HTML Preparation code:

<div class="list-container">
  <div class="list-item"></div>
  <div class="list-item"></div>
  <div class="list-item"></div>
  <div class="list-item"></div>
  <div class="list-item"></div>
</div>

Script Preparation code:

var $allItens = document.getElementsByClassName('list-item');

Tests:

for lef of
for (let $item of $allItens) { console.log($item); }
for var of
for (var $item of $allItens) { console.log($item); }
for var(out) length
var i = 0; for (i; i < $allItens.length; i++) { console.log($allItens[i]); }
for var(inside) length
for (var i = 0; i < $allItens.length; i++) { console.log($allItens[i]); }
for var(out) length(out)
var i = 0, l = $allItens.length; for (i; i < l; i++) { console.log($allItens[i]); }
for var(inside) length(inside)
for (var i = 0, l = $allItens.length; i < l; i++) { console.log($allItens[i]); }
for var(out) item check
var i = 0; for (i; $allItens[i]; i++) { console.log($allItens[i]); }
for var(inside) item check
for (var i = 0; $allItens[i]; i++) { console.log($allItens[i]); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for lef of
for var of
for var(out) length
for var(inside) length
for var(out) length(out)
for var(inside) length(inside)
for var(out) item check
for var(inside) item check

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 26 days ago):

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

The provided benchmark measures the performance difference between various iterations of a `for` loop in JavaScript, specifically when iterating over an array or a collection of elements. The test uses HTML and JavaScript to create a simple page with multiple list items, and then runs each test case to measure the number of executions per second (FPS) for each browser.

Here are the options being compared:

1. **For...of loop**: This is a new type of `for` loop introduced in ECMAScript 2015 (ES6). It allows iterating over arrays or iterables without manually managing an index variable.
2. **Traditional `for` loop with manual indexing**: In this approach, the loop uses a separate variable to keep track of the current index and increments it on each iteration.
3. **Traditional `for` loop with bracket notation**: This method uses the square bracket syntax (`[$allItens[i]]`) to access elements in the array.

Pros and cons of each approach:

* **For...of loop**:
	+ Pros: More concise, easier to read, and less prone to off-by-one errors.
	+ Cons: May not be as efficient due to additional overhead for handling iteration protocols.
* **Traditional `for` loop with manual indexing**:
	+ Pros: Can be more efficient since it avoids the overhead of bracket notation and iteration protocols.
	+ Cons: More verbose, more error-prone (e.g., off-by-one errors), and less readable.
* **Traditional `for` loop with bracket notation**:
	+ Pros: Similar performance to manual indexing but provides a safer alternative to traditional indexing.
	+ Cons: Less readable and more verbose than the for...of loop.

The results of the benchmark show that:

1. The for...of loop is generally slower compared to the traditional `for` loop with manual indexing, although the difference is small.
2. The bracket notation approach has similar performance to manual indexing but with slightly better readability.
3. There are no significant differences in performance between the three approaches, especially considering the limited scope of this benchmark.

In summary, while there may be slight performance differences between these approaches, the for...of loop and traditional `for` loops with manual indexing or bracket notation have similar performance characteristics, making them suitable choices depending on personal preference, code readability, and specific use cases.

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 11_2_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.82 Safari/537.36

Browser/OS: Chrome 89 on Mac OS X 11.2.3

View result in a separate tab

Test name	Executions per second
for lef of	29029.2 Ops/sec
for var of	28889.9 Ops/sec
for var(out) length	29838.9 Ops/sec
for var(inside) length	29375.2 Ops/sec
for var(out) length(out)	29928.3 Ops/sec
for var(inside) length(inside)	30177.2 Ops/sec
for var(out) item check	29894.3 Ops/sec
for var(inside) item check	29737.0 Ops/sec

Related benchmarks:

for lef of OR for var of OR for var length - v3 (version: 0)

Comparing performance of: for lef of vs for var of vs for var(out) length vs for var(inside) length vs for var(out) length(out) vs for var(inside) length(inside) vs for var(out) item check vs for var(inside) item check

Created: 5 years ago by: Registered User

Jump to the latest result

for lef of

for var of

for var(out) length

for var(inside) length

for var(out) length(out)

for var(inside) length(inside)

for var(out) item check

for var(inside) item check

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 26 days ago):