Benchmark: teste_template - MeasureThat.net

Script Preparation code:

const tpl = document.createElement('template');
tpl.innerHTML = `
<div>
    <h1>Heading</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <button>Button</button>
</div>
`;

const el = tpl.content.firstElementChild
document.documentElement.appendChild(el.cloneNode());

Tests:

teste_template_string
const section = document.createElement('section'); section.innerHTML += ` <div> <h1>Heading</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> <button>Button</button> </div> `; document.documentElement.appendChild(section);
teste_DocumentFragment
const fragment = document.createDocumentFragment(); const el = document.createElement('div'); const heading = document.createElement('h1'); const para1 = document.createElement('p'); const para2 = document.createElement('p'); const button = document.createElement('button'); heading.innerText = 'Heading'; para1.innerText = 'Paragraph 1'; para2.innerText = 'Paragraph 2'; button.innerText = 'Button'; el.appendChild(heading); el.appendChild(para1); el.appendChild(para2); el.appendChild(button); fragment.appendChild(el); document.documentElement.appendChild(fragment);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
teste_template_string
teste_DocumentFragment

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.

**Benchmark Overview**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks. The provided benchmark definition and test cases are used to measure the performance of different approaches for creating HTML elements in JavaScript.

**Script Preparation Code**

The script preparation code creates an HTML template with a heading, two paragraphs, and a button. This template is then cloned and appended to the document's root element. There are two variations:

1. **`const tpl = ...`**: Creates an HTML template using `document.createElement('template')`. The template's innerHTML is set to the desired HTML content.
2. **`const section = ...`**: Creates a new `<section>` element and appends its innerHTML directly to it.

**Html Preparation Code**

The html preparation code is empty for both test cases, indicating that no additional HTML content needs to be created before running the benchmarks.

**Test Cases**

There are two individual test cases:

1. **`teste_template_string`**: Creates an HTML template using `const section = ...`, where the innerHTML of the `<section>` element is set directly.
2. **`teste_DocumentFragment`**: Creates a new document fragment, creates four elements (`<div>`, `<h1>`, `<p>`, and `<button>`) inside it, sets their text content, and appends them to the fragment.

**Performance Comparison**

The benchmark compares the performance of two approaches:

1. **`const tpl = ...`**: Creates an HTML template using `document.createElement('template')`.
2. **`const section = ...`**: Creates a new `<section>` element and appends its innerHTML directly to it.

**Pros and Cons**

* **Template-based approach (`const tpl = ...`)**:
	+ Pros:
		- Can be more efficient for creating complex HTML templates with many elements.
		- Can reduce DOM manipulation overhead.
	+ Cons:
		- May have higher memory usage due to the creation of a new template element.
		- Can lead to slower initial rendering times if not optimized properly.
* **DOM-based approach (`const section = ...`)**:
	+ Pros:
		- Has lower memory usage compared to the template-based approach.
		- Can be faster for simple HTML content with few elements.
	+ Cons:
		- May have higher overhead due to repeated DOM manipulations.

**Other Considerations**

* **Document Fragments**: The `teste_DocumentFragment` test case uses a document fragment to optimize the creation of multiple elements. This approach can reduce DOM manipulation overhead and improve performance for large HTML documents.
* **Browser Support**: Both approaches are supported by modern browsers, but the template-based approach may have better support due to its use of Web Components.

**Alternatives**

Some alternative approaches could be:

1. **Using a library like React or Angular**: These libraries provide optimized rendering and DOM manipulation mechanisms that can improve performance.
2. **Using a virtual DOM like Virtual Node**: This approach uses a virtual representation of the DOM, which can reduce the number of DOM manipulations required.
3. **Using a caching mechanism**: Implementing a caching mechanism for frequently used HTML templates or components can reduce the overhead of repeated DOM manipulations.

It's essential to note that the best approach depends on the specific use case, performance requirements, and browser support.

Related benchmarks:

teste_template (version: 0)

Comparing performance of: teste_template_string vs teste_DocumentFragment

Created: 4 years ago by: Guest

Jump to the latest result

teste_template_string

teste_DocumentFragment

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