Benchmark: Template String vs Template Function 3

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;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Template String
Template Function
Template String Map

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

I'll break down the provided benchmark and explain what's being tested, compared options, pros and cons of those approaches, and other considerations.

**Benchmark Overview**

The benchmark compares three different ways to render template-based HTML in JavaScript:

1. **Template String**: Using template literals (backticks) with embedded expressions.
2. **Template Function**: A custom function that takes an object as input and returns the rendered HTML string.
3. **Template String Map**: Using template literals with a `map()` method to apply a function to each item in the array.

**What's being tested?**

The benchmark tests which approach is faster for rendering the same template structure. The test case consists of:

* Creating an HTML element (a `div`) and getting a reference to it using `document.querySelector`.
* Defining three template strings: `template`, `templateFunction`, and `templateStringMap`. These templates contain:
	+ A container div with a conditionally applied class (`Enabled` or `Disabled`)
	+ An unordered list of items, where each item is rendered as an HTML element
	+ The list items are generated using the corresponding template function (or string)
* Appending the rendered HTML to the placeholder element

**Options compared**

| Option | Description |
| --- | --- |
| Template String | Using template literals with embedded expressions |
| Template Function | A custom function that takes an object as input and returns the rendered HTML string |
| Template String Map | Using template literals with a `map()` method to apply a function to each item in the array |

**Pros and Cons of each approach:**

1. **Template String**:
	* Pros:
		+ Easy to read and write
		+ No need for an external library or function creation
	* Cons:
		+ May lead to slower performance due to string concatenation (using `+` operator)
2. **Template Function**:
	* Pros:
		+ Can be optimized for better performance by using a single function and reducing string concatenation
	* Cons:
		+ Requires creating an external function, which may have overhead
3. **Template String Map**:
	* Pros:
		+ Similar to Template String but uses `map()` method, which can lead to faster execution (due to avoiding explicit loop)
	* Cons:
		+ May require additional memory allocation for the array of generated strings

**Other considerations:**

* The benchmark is likely run multiple times and the results are averaged to produce the final execution count per second.
* Different browsers may have varying performance optimizations, which can affect the results.

**Libraries and features used in this benchmark:**

There is no library mentioned in the benchmark definition or test cases. However, it's worth noting that template literals were introduced in ECMAScript 2015 (ES6), so all tested browsers should support them.

No special JavaScript features or syntax are mentioned in the provided information.

**Alternatives to these approaches:**

1. **Virtual DOM libraries**: Such as React or Angular, which provide their own templating mechanisms and can optimize rendering for better performance.
2. **Pre-rendering techniques**: Like server-side rendering (SSR) or static site generation (SSG), which render HTML on the server before sending it to clients.

Keep in mind that the optimal approach depends on specific use cases, performance requirements, and the type of content being rendered.

Related benchmarks:

Template String vs Template Function 3 (version: 0)

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

Created: 3 years ago by: Guest

Jump to the latest result

Template String

Template Function

Template String Map

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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