Benchmark: Template String vs Template Function

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>${itemList.map(subTemplate).join('')}</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; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Template String
Template Function

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.

Let's break down the provided benchmark and explain what's being tested.

**Benchmark Definition**

The benchmark is testing two different approaches to generate HTML templates: Template Strings and Template Functions.

**Template Strings**

In this approach, the template is defined as a string literal using backticks (``). The `subTemplate` function takes an item as an argument and returns the corresponding HTML element. The main template uses the `isEnabled` variable and maps over the `itemList` array, applying the `subTemplate` function to each item.

**Template Functions**

In this approach, a separate function (`templateFunction`) is defined to generate the HTML template. This function takes an object as an argument, checks if it's null or undefined (using the OR operator), and then uses a `with` statement to iterate over the object's properties. The function returns the generated HTML string.

**Options being compared**

The two approaches are compared in terms of performance. The benchmark measures the number of executions per second for each approach, using different browsers and devices.

**Pros and Cons**

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

* **Template Strings:**
	+ Pros:
		- More readable and concise code
		- Less prone to errors due to the explicit syntax
	+ Cons:
		- May be slower due to string interpolation
		- Limited control over formatting and layout
* **Template Functions:**
	+ Pros:
		- Provides more control over formatting and layout
		- Can be faster for complex templates
	+ Cons:
		- More verbose code, which can lead to errors if not handled carefully
		- Less readable due to the use of `with` statements

**Library usage**

There is no library being used in this benchmark. The `Array.prototype.join()` method is used in both approaches, but it's a built-in JavaScript method.

**Special JS feature or syntax**

The `with` statement is used in the Template Function approach. It's a legacy feature that allows iteration over an object's properties without using a traditional loop. While it's not recommended for new code, it's still supported in older browsers and versions of JavaScript.

**Alternative approaches**

Other alternatives to these two approaches include:

* **DOM manipulation libraries**: Libraries like React or Angular can provide more efficient and modular ways to generate HTML templates.
* **String interpolation libraries**: Libraries like Mustache or Handlebars can provide more control over formatting and layout, while also offering performance benefits.
* **Template engines**: Engines like Handlebars or nunjucks can provide a more robust and feature-rich way to generate HTML templates.

In summary, the benchmark is testing the performance of two different approaches to generate HTML templates: Template Strings and Template Functions. The results will help users understand which approach is faster and more suitable for their use case.

Related benchmarks:

Template String vs Template Function (version: 0)

Comparing performance of: Template String vs Template Function

Created: 3 years ago by: Guest

Jump to the latest result

Template String

Template Function

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):