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

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 8 runs

template literals

92K/s

plus sign table

89K/s

View exact numbers

✓ template literals: 91,757 ops/sec
• plus sign table: 89,148 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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

template literals

74K/s

plus sign table

74K/s

foreach

73K/s

View exact numbers

Test name	Executions per second
✓ template literals	74,404 Ops/sec
plus sign table	74,152 Ops/sec
foreach	73,227 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.

plus sign vs template literals vs foreach (version: 6) Benchmark.js

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

Created: 2 years ago by: Registered User

Go to the latest result

plus sign table

template literals

foreach

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

plus sign vs template literals vs foreach (version: 6) Benchmark.js

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

Created: 2 years ago by: Registered User

Go to the latest result

plus sign table

template literals

foreach

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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