Benchmark: template innerHTML vs DocumentFragment createElement

Tests:

template

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());

​x
 
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.firstElementChilddocument.documentElement.appendChild(el.cloneNode());

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

 
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

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
template
DocumentFragment

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:133.0) Gecko/20100101 Firefox/133.0

Browser/OS: Firefox 133 on Windows

View result in a separate tab

Test name	Executions per second
template	97746.4 Ops/sec
DocumentFragment	103056.7 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 5 months ago):

I'll break down the provided benchmark and its options, pros, cons, and other considerations.

Benchmark Overview

The benchmark compares two approaches: using an HTML template (innerHTML) versus using a DocumentFragment to render dynamic content.

Options Compared

Template (innerHTML):
- Pros:
  - Easy to use and understand.
  - Works well for simple templates with minimal nested elements.
- Cons:
  - Can lead to poor performance due to the browser's HTML parsing and rendering overhead.
  - May cause issues if the template contains malicious or user-inputted data.
DocumentFragment:
- Pros:
  - More efficient than innerHTML for complex templates with nested elements.
  - Allows for better control over the rendering process, reducing browser overhead.
- Cons:
  - Requires more code and setup compared to innerHTML.
  - May be less familiar to developers who are not experienced with DocumentFragment.

Library Used

In both test cases, the createDocumentFragment() method is used. A DocumentFragment is a container that holds a subset of the DOM tree. It's useful for optimizing performance by allowing you to update the fragment and then appending it to the document at once, rather than updating individual elements.

Special JS Feature or Syntax

There are no special JavaScript features or syntaxes mentioned in this benchmark.

Benchmark Preparation Code

The preparation code is empty, as required by MeasureThat.net. This means that the test case starts from a clean slate, without any pre-existing DOM elements or context.

Other Alternatives

Other approaches to rendering dynamic content include:

Server-Side Rendering (SSR): Renders HTML on the server and sends it to the client.
Client-Side Rendering with Virtual DOM: Uses libraries like React or Vue.js to optimize rendering by only updating the virtual DOM, which is then rendered to the real DOM.
Custom Template Engines: Implement custom template engines using JavaScript, such as Handlebars or Mustache.

Keep in mind that each approach has its pros and cons, and the choice of which one to use depends on the specific requirements of your project, including performance, complexity, and maintainability.

LLMs can make mistakes. Check important info.

I'll break down the provided benchmark and its options, pros, cons, and other considerations.

**Benchmark Overview**

The benchmark compares two approaches: using an HTML template (`innerHTML`) versus using a `DocumentFragment` to render dynamic content.

**Options Compared**

1. **Template (`innerHTML`):**
	* Pros:
		+ Easy to use and understand.
		+ Works well for simple templates with minimal nested elements.
	* Cons:
		+ Can lead to poor performance due to the browser's HTML parsing and rendering overhead.
		+ May cause issues if the template contains malicious or user-inputted data.
2. **DocumentFragment:**
	* Pros:
		+ More efficient than `innerHTML` for complex templates with nested elements.
		+ Allows for better control over the rendering process, reducing browser overhead.
	* Cons:
		+ Requires more code and setup compared to `innerHTML`.
		+ May be less familiar to developers who are not experienced with DocumentFragment.

**Library Used**

In both test cases, the `createDocumentFragment()` method is used. A `DocumentFragment` is a container that holds a subset of the DOM tree. It's useful for optimizing performance by allowing you to update the fragment and then appending it to the document at once, rather than updating individual elements.

**Special JS Feature or Syntax**

There are no special JavaScript features or syntaxes mentioned in this benchmark.

**Benchmark Preparation Code**

The preparation code is empty, as required by MeasureThat.net. This means that the test case starts from a clean slate, without any pre-existing DOM elements or context.

**Other Alternatives**

Other approaches to rendering dynamic content include:

1. **Server-Side Rendering (SSR):** Renders HTML on the server and sends it to the client.
2. **Client-Side Rendering with Virtual DOM:** Uses libraries like React or Vue.js to optimize rendering by only updating the virtual DOM, which is then rendered to the real DOM.
3. **Custom Template Engines:** Implement custom template engines using JavaScript, such as Handlebars or Mustache.

Keep in mind that each approach has its pros and cons, and the choice of which one to use depends on the specific requirements of your project, including performance, complexity, and maintainability.

Related benchmarks:

template innerHTML vs DocumentFragment createElement (version: 0)

Comparing performance of: template vs DocumentFragment

Created: 4 years ago by: Registered User

Jump to the latest result