Benchmark: Template String vs Template Function 4

Script Preparation code:

var placeHolderElem = document.createElement('div');
placeHolderElem.id = "PlaceHolder";
document.body.append(placeHolderElem);
var placeHolder = document.querySelector('#PlaceHolder');
var isEnabled = true;
var itemList = [1, 2, 3, 4];

Tests:

Template String
const subTemplate = (item) => `<li>${item}</li>`; const template = `<div class="container"> ${isEnabled ? 'Enabled' : 'Disabled'} <ul>${(()=> { var output = ''; itemList.forEach((item) =>{ output += subTemplate(item) }); return output})()}</ul> </div>`; placeHolder.innerHTML = template;
Template Function
const templateFunction = function (obj) { obj || (obj = {}); var __t, __p = '', __j = Array.prototype.join; function print() { __p += __j.call(arguments, '') } with (obj) { __p += '<div class="container">\r\n ' + ((__t = (isEnabled ? 'Enabled' : 'Disabled')) == null ? '' : __t) + '\r\n <ul>\r\n '; itemList.forEach((item) => { ; __p += '\r\n <li>' + ((__t = (item)) == null ? '' : __t) + '</li>\r\n '; }); __p += '\r\n </ul>\r\n</div>'; } return __p; } placeHolder.innerHTML = templateFunction({ isEnabled });
Template String Map
const subTemplate = (item) => `<li>${item}</li>`; const template = `<div class="container"> ${isEnabled ? 'Enabled' : 'Disabled'} <ul>${itemList.map(subTemplate).join('')}</ul> </div>`; placeHolder.innerHTML = template;
Template String Map Inside
const template = `<div class="container"> ${isEnabled ? 'Enabled' : 'Disabled'} <ul>${itemList.map((item)=>`<li>${item}</li>`).join('')}</ul> </div>`; placeHolder.innerHTML = template;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Template String
Template Function
Template String Map
Template String Map Inside

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 27 days ago):

LLMs can make mistakes. Check important info.

Let's break down what's being tested in this benchmark.

**Benchmark Goal:**

The goal of this benchmark is to compare the performance of three different approaches for generating HTML content using template literals (template strings) or template functions:

1. **Template String**: Using a template string with the `${}` syntax to embed expressions and values directly inside the string.
2. **Template Function**: Using a separate function (`templateFunction`) that takes an object as input and returns the rendered HTML string.
3. **Template String Map** (also known as Template Literal Method Call, TMCM): Using a template string with the `${}` syntax, but applying the `map` method to an array of items and joining them using `join('')`.
4. **Template String Map Inside**: Similar to TMCM, but with the map function applied directly inside the template string.

**Options Compared:**

The benchmark compares the performance of these four approaches:

1. Template String
2. Template Function
3. Template String Map (TMCM)
4. Template String Map Inside

**Pros and Cons:**

Here's a brief summary of the pros and cons of each approach:

* **Template String**: Pros - simple, easy to read, and write. Cons - can be slower due to string concatenation.
* **Template Function**: Pros - flexible, reusable, and potentially faster due to function call optimization. Cons - requires creating a separate function, which may add overhead.
* **Template String Map (TMCM)**: Pros - similar performance to Template Function, but with the benefits of template strings. Cons - can be less readable for complex templates.
* **Template String Map Inside**: Similar pros and cons as TMCM.

**Library Usage:**

There is no explicit library usage in this benchmark, but it's worth noting that modern JavaScript engines have optimized template literals to use a combination of string concatenation and function call optimization under the hood. However, the specific implementation details may vary between browsers.

**Special JS Features/Syntax:**

None of the approaches require any special JavaScript features or syntax beyond what's available in ECMAScript 2015 (ES6).

**Alternatives:**

Other alternatives for generating HTML content using template literals include:

* Using `innerHTML` property to set the HTML content, which can be faster but also more prone to security issues.
* Using a template engine library like Handlebars or Mustache, which provide additional features and optimization techniques.

Overall, this benchmark provides a useful comparison of different approaches for generating HTML content using template literals, allowing developers to choose the best approach for their specific use case.

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36

Browser/OS: Chrome 104 on Windows

View result in a separate tab

Test name	Executions per second
Template String	105235.2 Ops/sec
Template Function	71240.9 Ops/sec
Template String Map	99385.8 Ops/sec
Template String Map Inside	103073.5 Ops/sec

Related benchmarks:

Template String vs Template Function 4 (version: 0)

Comparing performance of: Template String vs Template Function vs Template String Map vs Template String Map Inside

Created: 2 years ago by: Guest

Jump to the latest result

Template String

Template Function

Template String Map

Template String Map Inside

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 27 days ago):