Benchmark: Compare add to UL (foreach vs for loop vs separate function unrolled)

Tests:

foreach
var ulBblDropdown = document.createElement('ul') var SPN = document.createElement('span') const cmds = ['Restart test','Resume test','Pause test','Edit test','Delete test'] cmds.forEach((text, index) => { let li = document.createElement('li'); let span = SPN.cloneNode(true) span.id = `edit${index}`; span.textContent = text; li.appendChild(span); ulBblDropdown.appendChild(li); });
for loop
var ulBblDropdown = document.createElement('ul') var SPN = document.createElement('span') const cmds = ['Restart test','Resume test','Pause test','Edit test','Delete test'] for (let i = 0; i < 5; ++i) { let li = document.createElement('li'); let span = SPN.cloneNode(true) span.id = `edit${i}`; span.textContent = cmds[i]; li.appendChild(span); ulBblDropdown.appendChild(li); }
unrolled function
var ulBblDropdown = document.createElement('ul') var SPN = document.createElement('span') function getEditTXT(text, index) { let li = document.createElement('li'); let span = SPN.cloneNode(true) span.id = `edit${index}`; span.textContent = text; li.appendChild(span); return li }; ulBblDropdown.appendChild(getEditTXT(0,'Restart test')) ulBblDropdown.appendChild(getEditTXT(1,'Resume test')) ulBblDropdown.appendChild(getEditTXT(2,'Pause test')) ulBblDropdown.appendChild(getEditTXT(3,'Edit test')) ulBblDropdown.appendChild(getEditTXT(4,'Delete test'))

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
foreach
for loop
unrolled function

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

Test name	Executions per second
foreach	270300.6 Ops/sec
for loop	272080.1 Ops/sec
unrolled function	254312.2 Ops/sec

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

LLMs can make mistakes. Check important info.

The provided JSON represents a JavaScript benchmarking test case on MeasureThat.net, comparing the performance of three approaches: using a `foreach` loop, a traditional `for` loop, and an unrolled function.

**Test Cases**

1. **Foreach Loop**: This approach uses the `forEach` method to iterate over the array of commands. In this implementation, a new list item (`li`) is created for each command, and the command text is cloned from the shared `SPN` element using `cloneNode(true)`.
2. **For Loop**: This approach uses a traditional `for` loop to iterate over the array of commands. In this implementation, a new list item (`li`) is created for each command, and the command text is cloned from the shared `SPN` element using `cloneNode(true)`.
3. **Unrolled Function**: This approach defines a separate function, `getEditTXT`, which takes two arguments: the command text and the index. The function creates a new list item (`li`) for each command, clones the command text from the shared `SPN` element using `cloneNode(true)`, and appends it to the list item.

**Comparison**

The test case compares the performance of these three approaches in creating and appending list items to an unordered list (`ulBblDropdown`). The results indicate that:

* The `foreach` loop approach is the fastest, with approximately 272 executions per second on a Chrome 121 browser.
* The traditional `for` loop approach is slightly slower than the `foreach` loop approach but faster than the unrolled function approach, with approximately 270 executions per second.
* The unrolled function approach is the slowest, with approximately 254 executions per second.

**Pros and Cons**

1. **Foreach Loop**:
	* Pros: Easy to read and write, concise code.
	* Cons: May not be as performance-oriented as other approaches, as it relies on the `forEach` method's overhead.
2. **For Loop**:
	* Pros: More control over iteration, potentially more efficient than `foreach`.
	* Cons: More verbose code, may require additional variables to keep track of iteration indices.
3. **Unrolled Function**:
	* Pros: Can be optimized for performance by minimizing function calls and cloning operations.
	* Cons: May be less readable due to the use of a separate function and repeated cloning operations.

**Library and Special JS Features**

In this benchmark, no specific libraries are mentioned, but `cloneNode(true)` is used to clone elements. This method is a standard JavaScript method for creating a deep copy of an element.

There are no special JavaScript features or syntax explicitly mentioned in the test cases. However, the use of `forEach` and `for` loops demonstrates basic iteration concepts in JavaScript.

**Other Alternatives**

If you wanted to compare the performance of these approaches with other methods, such as using `map()` or a callback function with `push()`, you could modify the benchmark definition to include those alternatives.

Related benchmarks:

Compare add to UL (foreach vs for loop vs separate function unrolled) (version: 0)

Comparing performance of: foreach vs for loop vs unrolled function

Created: 2 years ago by: Registered User

Jump to the latest result

foreach

for loop

unrolled function

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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