Benchmark: plus sign vs template literals vs foreach

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); });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
plus sign table
template literals
foreach

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
plus sign table	74151.9 Ops/sec
template literals	74404.4 Ops/sec
foreach	73227.3 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its test cases.

**Benchmark Overview**

The benchmark measures the performance of three different ways to create and populate HTML elements in JavaScript: using the `+` operator, template literals, and a `for...of` loop (foreach).

**Test Cases**

There are three test cases:

1. **Plus Sign Table**: This test case uses the `+` operator to concatenate strings and create HTML elements.
2. **Template Literals**: This test case uses template literals to create HTML elements.
3. **Foreach**: This test case uses a `for...of` loop to iterate over an array of strings and create HTML elements.

**Options Compared**

The benchmark compares the performance of three different approaches:

* Using the `+` operator to concatenate strings
* Using template literals
* Using a `for...of` loop (foreach)

**Pros and Cons of Each Approach**

1. **Plus Sign Operator**:
	* Pros: Simple and straightforward, easy to read and understand.
	* Cons: Can be slow due to the overhead of concatenating strings using the `+` operator.
2. **Template Literals**:
	* Pros: More expressive and concise than using the `+` operator, can make code easier to read and maintain.
	* Cons: May not be supported in older browsers or environments that don't support template literals.
3. **Foreach Loop**:
	* Pros: Can be more efficient than the other two approaches, as it allows for early exit and doesn't require string concatenation.
	* Cons: Can be less readable and maintainable than the other two approaches, especially if not used correctly.

**Libraries Used**

None of the test cases use a specific library. However, they do rely on the `document` object and JavaScript's built-in DOM API to create and manipulate HTML elements.

**Special JS Features or Syntax**

The test cases don't use any special JavaScript features or syntax beyond what's required for creating and manipulating HTML elements.

**Other Alternatives**

If you're interested in exploring alternative approaches, here are a few options:

* Using a string interpolation library like Handlebars or Pug
* Using a templating engine like Mustache or Nunjucks
* Using a library like jQuery to simplify DOM manipulation

Keep in mind that these alternatives may not necessarily offer performance improvements over the three approaches tested by MeasureThat.net.

Related benchmarks:

plus sign vs template literals vs foreach (version: 6)

Comparing performance of: plus sign table vs template literals vs foreach

Created: 2 years ago by: Registered User

Jump to the latest result

plus sign table

template literals

foreach

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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