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

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Safari/605.1.15

Browser: Safari 17

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 2 years ago

Benchmark engine: Benchmark.js

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'))