Run results for: plus sign vs template literals vs foreach

Run details:

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: Chrome 121

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 9 months ago

Test name	Executions per second
plus sign table	74151.9 Ops/sec
template literals	74404.4 Ops/sec
foreach	73227.3 Ops/sec

Tests:

plus sign table
const UaDiv = document.createElement('div'); UaDiv.id = 'Ua'; const alpha=['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'] const tags = ['😓 awkward', '🫥 bad expression', '🖼 bad framing', '🍞 bland', '🏟 distracting', '💨 blurry', '⚡️ bright', '🚊 busy', '🌈 colorful', '🕶 cool', '🌚 dark', '😬 forced smile', '🧂 grainy', '🚨 overedited', '🚶 poor posture', '🔭 too far away', '🔎 too close up']; for (let index = 0; index < 17; ++index) { let tag = tags[index]; const span = document.createElement('span'); span.id = 'Q' + alpha[index]; span.className = 'BZ'; span.textContent = tag; UaDiv.appendChild(span); }
template literals
const UaDiv = document.createElement('div'); UaDiv.id = 'Ua'; const alpha=['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'] const tags = ['😓 awkward', '🫥 bad expression', '🖼 bad framing', '🍞 bland', '🏟 distracting', '💨 blurry', '⚡️ bright', '🚊 busy', '🌈 colorful', '🕶 cool', '🌚 dark', '😬 forced smile', '🧂 grainy', '🚨 overedited', '🚶 poor posture', '🔭 too far away', '🔎 too close up']; for (let index = 0; index < 17; ++index) { let tag = tags[index]; const span = document.createElement('span'); span.id = `Q${alpha[index]}`; span.className = 'BZ'; span.textContent = tag; UaDiv.appendChild(span); }
foreach
const UaDiv = document.createElement('div'); UaDiv.id = 'Ua'; const alpha=['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'] const tags = ['😓 awkward', '🫥 bad expression', '🖼 bad framing', '🍞 bland', '🏟 distracting', '💨 blurry', '⚡️ bright', '🚊 busy', '🌈 colorful', '🕶 cool', '🌚 dark', '😬 forced smile', '🧂 grainy', '🚨 overedited', '🚶 poor posture', '🔭 too far away', '🔎 too close up']; tags.forEach((tag, index) => { const span = document.createElement('span'); span.id = `Q${alpha[index]}`; span.className = 'BZ'; span.textContent = tag; UaDiv.appendChild(span); });

Run results for: plus sign vs template literals vs foreach

plus sign table

template literals

foreach