Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
Compare add to UL (foreach vs for loop vs separate function unrolled)
(version: 0)
Benchmark.js
Comparing performance of:
foreach vs for loop vs unrolled function
Created:
2 years ago
by:
Registered User
Go to the latest result
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>
Run tests (3)
Previous results
Fork
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
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=508720" width="100%" height="500px"></iframe>
for loop
272K/s
foreach
270K/s
unrolled function
254K/s
View exact numbers
Test name
Executions per second
✓
for loop
272,080 Ops/sec
foreach
270,301 Ops/sec
unrolled function
254,312 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
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
for vs foreach vs some
for (cached length) vs foreach vs some
Comments
Confirm delete:
Do you really want to delete benchmark?