Benchmark: templateTag vs html parse

Script Preparation code:

var html = '<div class="something"><p>This is a normal test between the <b>template tag cloning</b> vs <b>string parse</b>.</p><input type="text" /><div>name</div></div>';

function getTemplateTag() {
  const template = document.createElement('template');
  template.innerHTML = html;
  return template;
}

var cachedTemplate = getTemplateTag();

Tests:

template tag repeated creation
const template = getTemplateTag(); const fragment = document.importNode(template.content, true);
cached template tag
const fragment = document.importNode(cachedTemplate.content, true);
html parse
const template = getTemplateTag(); const fragment = template.content;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
template tag repeated creation
cached template tag
html parse

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 136 on Android

View result in a separate tab

Test name	Executions per second
template tag repeated creation	25881.9 Ops/sec
cached template tag	58420.3 Ops/sec
html parse	29881.5 Ops/sec

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

LLMs can make mistakes. Check important info.

**What is being tested:**

The provided benchmark measures the performance of two approaches:

1. **Template Tag Cloning**: This involves creating a new template element using the `document.createElement('template')` method, and then cloning its contents using the `importNode()` method.
2. **String Parse**: This involves parsing an HTML string directly using JavaScript.

**Options compared:**

The benchmark compares three test cases:

1. **Template Tag Repeated Creation**: This tests creating a new template element every time, as shown in the `getTemplateTag()` function call.
2. **Cached Template Tag**: This tests reusing a previously created and cached template element, as shown in the `const fragment = document.importNode(cachedTemplate.content, true)` line.
3. **HTML Parse**: This tests parsing the entire HTML string directly without creating any intermediate elements.

**Pros and Cons:**

* **Template Tag Cloning**:
	+ Pros: Can be more efficient if the same template is reused multiple times, as it avoids cloning the contents every time.
	+ Cons: Requires creating a new element each time, which can be overhead.
* **String Parse**:
	+ Pros: Avoids creating any intermediate elements, making it potentially more lightweight and efficient.
	+ Cons: May require more CPU cycles to parse the HTML string, especially for complex documents.
* **Cached Template Tag**:
	+ Pros: Reduces cloning overhead by reusing a previously created template element, which can improve performance.
	+ Cons: Requires creating the initial template element only once, and then storing it in memory.

**Library used:**

The benchmark uses the `document` object, specifically:

* `document.createElement('template')`: Creates a new template element.
* `document.importNode()`: Clones the contents of an element or parses an HTML string.

These are built-in browser APIs, so no additional libraries are required.

**Special JS feature/syntax:**

The benchmark uses JavaScript's `const` keyword for variable declarations and assignments, which is a modern JavaScript syntax. It also uses template literals (e.g., `'${html}'`) to insert values into strings.

**Other alternatives:**

If you wanted to modify or extend this benchmark, here are some alternative approaches:

* Compare the performance of different HTML parsing libraries, such as `DOMParser` or `jsdom`.
* Test the impact of various template engine options (e.g., `Mustache`, `Handlebars`) on performance.
* Compare the efficiency of using different JavaScript execution engines (e.g., V8, SpiderMonkey) in a benchmark.
* Add more test cases to cover other scenarios, such as parsing XML or JSON data.

Related benchmarks:

templateTag vs html parse (version: 2)

Compare the template tag cloning vs string parse.

Comparing performance of: template tag repeated creation vs cached template tag vs html parse

Created: 5 years ago by: Registered User

Jump to the latest result

template tag repeated creation

cached template tag

html parse

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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