Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Class manip
(version: 0)
Comparing performance of:
for loop vs forEach
Created:
2 years ago
by:
Registered User
Jump to the latest result
HTML Preparation code:
<flux-list class="hydrated"> <flux-list-item class="item hidden hydrated menu-closed" type="standard"> Search <flux-icon slot="prefix" class="hydrated" role="none" style="font-size: 20px;"></flux-icon> </flux-list-item> <flux-list-item class="item hidden hydrated menu-closed" type="standard"> Export <flux-icon slot="prefix" class="hydrated" role="none" style="font-size: 20px;"></flux-icon> </flux-list-item> <flux-list-item class="item hidden hydrated menu-closed" type="standard"> Share <flux-icon slot="prefix" class="hydrated" role="none" style="font-size: 20px;"></flux-icon> </flux-list-item> <flux-list-item class="menu menu3 hidden hydrated" type="standard"> Sort <flux-icon slot="prefix" class="hydrated" role="none" style="font-size: 20px;"></flux-icon> <flux-icon slot="suffix" class="hydrated" role="none" style="font-size: 20px;"></flux-icon> </flux-list-item> <flux-list-item class="submenu submenu-title submenu3 hydrated submenu-closed" type="standard"> Sort <flux-icon slot="prefix" class="hydrated" role="none" style="font-size: 20px;"></flux-icon> </flux-list-item> <flux-list-item class="sort-dropdown hydrated submenu submenu3 submenu-closed" type="single" selected="">Ascending</flux-list-item> <flux-list-item class="sort-dropdown hydrated submenu submenu3 submenu-closed" type="single">Descending</flux-list-item> <flux-list-item class="menu menu4 hidden hydrated" type="standard"> Display <flux-icon slot="prefix" class="hydrated" role="none" style="font-size: 20px;"></flux-icon> <flux-icon slot="suffix" class="hydrated" role="none" style="font-size: 20px;"></flux-icon> </flux-list-item> <flux-list-item class="submenu submenu-title submenu4 submenu-closed hydrated" type="standard"> Display <flux-icon slot="prefix" class="hydrated" role="none" style="font-size: 20px;"></flux-icon> </flux-list-item> <flux-list-item class="display-dropdown hydrated submenu submenu4 submenu-closed" type="single" selected="">Default</flux-list-item> <flux-list-item class="display-dropdown hydrated submenu submenu4 submenu-closed" type="single">Compact</flux-list-item> <flux-list-item class="item hidden hydrated menu-closed" type="standard"> Filter <flux-icon slot="prefix" class="hydrated" role="none" style="font-size: 20px;"></flux-icon> </flux-list-item> <flux-list-item class="item hidden hydrated menu-closed" type="standard"> Delete <flux-icon slot="prefix" class="hydrated" role="none" style="font-size: 20px;"></flux-icon> </flux-list-item> <flux-list-item class="item hidden hydrated" type="standard"> Search <flux-icon slot="prefix" class="hydrated" role="none" style="font-size: 20px;"></flux-icon> </flux-list-item> <flux-list-item class="item hidden hydrated" type="standard"> Export <flux-icon slot="prefix" class="hydrated" role="none" style="font-size: 20px;"></flux-icon> </flux-list-item> <flux-list-item class="item hidden hydrated" type="standard"> Share <flux-icon slot="prefix" class="hydrated" role="none" style="font-size: 20px;"></flux-icon> </flux-list-item> <flux-list-item class="menu menu3 hidden hydrated" type="standard"> Sort <flux-icon slot="prefix" class="hydrated" role="none" style="font-size: 20px;"></flux-icon> <flux-icon slot="suffix" class="hydrated" role="none" style="font-size: 20px;"></flux-icon> </flux-list-item> <flux-list-item class="submenu submenu-title submenu3 submenu-closed hydrated" type="standard"> Sort <flux-icon slot="prefix" class="hydrated" role="none" style="font-size: 20px;"></flux-icon> </flux-list-item> <flux-list-item class="sort-dropdown hydrated submenu submenu3 submenu-closed" type="single" selected="">Ascending</flux-list-item> <flux-list-item class="sort-dropdown hydrated submenu submenu3 submenu-closed" type="single">Descending</flux-list-item> <flux-list-item class="menu menu4 hidden hydrated" type="standard"> Display <flux-icon slot="prefix" class="hydrated" role="none" style="font-size: 20px;"></flux-icon> <flux-icon slot="suffix" class="hydrated" role="none" style="font-size: 20px;"></flux-icon> </flux-list-item> <flux-list-item class="submenu submenu-title submenu4 submenu-closed hydrated" type="standard"> Display <flux-icon slot="prefix" class="hydrated" role="none" style="font-size: 20px;"></flux-icon> </flux-list-item> <flux-list-item class="display-dropdown hydrated submenu submenu4 submenu-closed" type="single" selected="">Default</flux-list-item> <flux-list-item class="display-dropdown hydrated submenu submenu4 submenu-closed" type="single">Compact</flux-list-item> <flux-list-item class="item hidden hydrated" type="standard"> Filter <flux-icon slot="prefix" class="hydrated" role="none" style="font-size: 20px;"></flux-icon> </flux-list-item> <flux-list-item class="item hidden hydrated" type="standard"> Delete <flux-icon slot="prefix" class="hydrated" role="none" style="font-size: 20px;"></flux-icon> </flux-list-item> </flux-list>
Script Preparation code:
function getDefaultSlottedContent(element) { return [...element.childNodes].filter(child => { if (child.nodeType === Node.ELEMENT_NODE && (child).tagName.toLowerCase() === 'flux-tooltip') { return false; } return ( (child.nodeType === Node.TEXT_NODE && child.textContent.trim() !== '') || (child.nodeType === Node.ELEMENT_NODE && !child['slot']) ); }); }
Tests:
for loop
const overflowContent = document.querySelector('flux-list'); const listItems = getDefaultSlottedContent(overflowContent); for (let i = 0; i < listItems.length; i++) { const listItem = listItems[i]; const listItemClassList = listItem.classList; // menu if (listItemClassList.contains('menu')) { listItemClassList.remove('menu-closed'); } // submenu if (listItemClassList.contains('submenu')) { listItemClassList.add('submenu-closed'); listItem.hidden = true; } }
forEach
const overflowContent = document.querySelector('flux-list'); const menus = overflowContent.querySelectorAll('.menu'); menus.forEach(item => item.classList.remove('menu-closed')); const submenus = overflowContent.querySelectorAll('.submenu'); submenus.forEach(item => item.classList.add('submenu-closed'));
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
for loop
forEach
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):
It appears that the provided HTML code and benchmark test cases are related to testing the rendering performance of a Flux List component, likely from the Material-UI library. Based on the benchmark results, it seems that there is an improvement in the execution speed between the "for loop" test case and the "forEach" test case. The "for loop" test case has a significantly higher number of executions per second compared to the "forEach" test case. To answer your question: There is an optimization improvement of approximately 300% between the "for loop" test case and the "forEach" test case, with the "for loop" test case having a much faster execution speed.
Related benchmarks:
SD Bulk Selector Test 2
asdasdasdasd
_.compact vs filter(Boolean)
_.compact vs filter(Boolean) vs filter(element => element)
Compare Intersection lodash & filter
Comments
Confirm delete:
Do you really want to delete benchmark?