Benchmark: F&S JS test code

HTML Preparation code:

<div class="container input-block">
  <h2 class="change-text">Change my text</h2>
  <select class="selector">
    <option value="">Nothing</option>
    <option value="something">Something</option>
    <option>Helllllllllloooooooooooooo</option>

  </select>
  <button class="trigger">
    CLick me
  </button>
</div>
<div class="container input-block">
  <h2 class="change-text">You can't change my text</h2>
  <select class="selector-borked">
    <option value="">Nothing</option>
    <option value="something">Something</option>
  </select>
  <button class="trigger">
    CLick me
  </button>
</div>
<div class="container input-block">
  <h2 class="change-text">Change my text</h2>
  <select class="selector">
    <option value="">Nothing</option>
    <option value="something">Something</option>
  </select>
  <button class="trigger">
    CLick me
  </button>
</div>

Tests:

forEach
const inputBlocks = document.querySelectorAll(".input-block"); if (inputBlocks) inputBlocks.forEach((block, index) => { const select = block.querySelector(".selector"); const trigger = block.querySelector(".trigger"); const text = block.querySelector(".change-text"); const defaultText = text.textContent; if (!select || !trigger || !text) { return; } trigger.addEventListener("click", (e) => { text.textContent = select.value ? `Block ${index} says: ${select.value}` : defaultText; console.log( `Our text content is currently: ${text.textContent}, whereas our default copy is: ${defaultText}` ); }); });
for of
const inputBlocks = document.querySelectorAll(".input-block"); if (inputBlocks) // for of doesn't offer a builtin way of accessing index, so either do a counter or entries(). for(const [index, block] of inputBlocks.entries()) { const select = block.querySelector(".selector"); const trigger = block.querySelector(".trigger"); const text = block.querySelector(".change-text"); const defaultText = text.textContent; if (!select || !trigger || !text) { // we can't return because this is no longer a function. https://www.w3schools.com/js/js_break.asp continue; } trigger.addEventListener("click", (e) => { text.textContent = select.value ? `Block ${index} says: ${select.value}` : defaultText; console.log( `Our text content is currently: ${text.textContent}, whereas our default copy is: ${defaultText}` ); }); };
for
const inputBlocks = document.querySelectorAll(".input-block"); if (inputBlocks) for(let i = 0; i < inputBlocks.length; i++) { const block = inputBlocks[i]; const select = block.querySelector(".selector"); const trigger = block.querySelector(".trigger"); const text = block.querySelector(".change-text"); const defaultText = text.textContent; if (!select || !trigger || !text) { // we can't return because this is no longer a function. https://www.w3schools.com/js/js_break.asp continue; } trigger.addEventListener("click", (e) => { text.textContent = select.value ? `Block ${index} says: ${select.value}` : defaultText; console.log( `Our text content is currently: ${text.textContent}, whereas our default copy is: ${defaultText}` ); }); };

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
forEach
for of
for

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:100.0) Gecko/20100101 Firefox/100.0

Browser/OS: Firefox 100 on Windows

View result in a separate tab

Test name	Executions per second
forEach	2271.8 Ops/sec
for of	535.1 Ops/sec
for	318.8 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the test cases and explain what's being tested.

The benchmark is testing three ways to iterate over an array of elements in JavaScript:

1. **forEach**: This method iterates over an array and calls a provided function for each element. In this case, the function updates the text content of a `<div>` element based on the selected value.
2. **for...of**: This loop construct iterates over an iterable object (such as an array) and yields values from it. It's similar to `forEach`, but uses a more explicit syntax.
3. **for**: This traditional loop construct uses a counter variable to iterate over an array.

Here are the pros and cons of each approach:

**forEach**

Pros:

* Most intuitive and easiest to read
* Works well with asynchronous code

Cons:

* Can be slower than `for...of` due to function call overhead
* Less control over iteration variables (no `index` variable available)

**for...of**

Pros:

* More explicit and readable syntax
* Provides access to the current index of each element
* Faster execution compared to `forEach`

Cons:

* Less familiar syntax for some developers
* May require more setup for asynchronous code

**for**

Pros:

* Most control over iteration variables (can modify `index` variable)
* Fastest execution among the three options

Cons:

* Less intuitive and less readable than `forEach` or `for...of`
* Requires manual index management, which can be error-prone

The test results show that:

* **forEach** is the fastest option, with an average of 2271 executions per second.
* **for...of** is slightly slower than `forEach`, but still relatively fast (535 executions per second).
* **for** is the slowest option, with an average of 318 executions per second.

In terms of library usage, none of the test cases use any external libraries. However, they do rely on the built-in `document` object and `querySelector` methods to select HTML elements.

Regarding special JavaScript features or syntax, this benchmark does not use any advanced features like async/await, Promises, or modern ECMAScript syntax (e.g., arrow functions, destructuring).

Alternatives to these test cases could include:

* Testing other iteration constructs, such as `while` loops or `for...in` loops.
* Comparing the performance of different libraries or frameworks that provide iteration mechanisms (e.g., React, Angular).
* Adding more complex logic to the iteration function to simulate real-world scenarios (e.g., handling errors, caching results).

Related benchmarks:

F&S JS test code (version: 2)

Comparing performance of: forEach vs for of vs for

Created: 2 years ago by: Registered User

Jump to the latest result

forEach

for of

for

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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