Benchmark: template innerHTML vs DocumentFragment vs createElement - createTextNode 2

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 createTextNode
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'); const headingText = document.createTextNode('Heading'); const para1Text = document.createTextNode('Paragraph 1'); const para2Text = document.createTextNode('Paragraph 2'); const buttonText = document.createTextNode('Button'); heading.appendChild(headingText); para1.appendChild(para1Text); para2.appendChild(para2Text); button.appendChild(buttonText); 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');
const headingText = document.createTextNode('Heading');
const para1Text = document.createTextNode('Paragraph 1');
const para2Text = document.createTextNode('Paragraph 2');
const buttonText = document.createTextNode('Button');

heading.appendChild(headingText);
para1.appendChild(para1Text);
para2.appendChild(para2Text);
button.appendChild(buttonText);

el.appendChild(heading);
el.appendChild(para1);
el.appendChild(para2);
el.appendChild(button);

fragment.appendChild(el);
document.documentElement.appendChild(fragment);

createElement

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

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

createElement createTextNode
// 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'); const headingText = document.createTextNode('Heading'); const para1Text = document.createTextNode('Paragraph 1'); const para2Text = document.createTextNode('Paragraph 2'); const buttonText = document.createTextNode('Button'); heading.appendChild(headingText); para1.appendChild(para1Text); para2.appendChild(para2Text); button.appendChild(buttonText); el.appendChild(heading); el.appendChild(para1); el.appendChild(para2); el.appendChild(button); // fragment.appendChild(el); document.documentElement.appendChild(el);
// 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');
const headingText = document.createTextNode('Heading');
const para1Text = document.createTextNode('Paragraph 1');
const para2Text = document.createTextNode('Paragraph 2');
const buttonText = document.createTextNode('Button');

heading.appendChild(headingText);
para1.appendChild(para1Text);
para2.appendChild(para2Text);
button.appendChild(buttonText);

el.appendChild(heading);
el.appendChild(para1);
el.appendChild(para2);
el.appendChild(button);

// fragment.appendChild(el);
document.documentElement.appendChild(el);

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 createTextNode
createElement
createElement createTextNode
DocumentFragment

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Firefox 101 on Windows

View result in a separate tab

Test name	Executions per second
template	88706.3 Ops/sec
DocumentFragment createTextNode	99746.1 Ops/sec
createElement	128111.0 Ops/sec
createElement createTextNode	128457.5 Ops/sec
DocumentFragment	62727.3 Ops/sec

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

I'll break down the benchmark definition and explain what's being tested.

The benchmark is comparing three approaches to create a HTML structure:

Template innerHTML: This approach uses innerHTML property of a template element to set its content, which is then cloned and appended to the document body.
DocumentFragment with createTextNode: This approach creates a DocumentFragment, populates it with text nodes (using createTextNode) and then appends the fragment to the document body.
Element creation with innerText: This approach creates individual HTML elements (e.g., headings, paragraphs, buttons) using createElement and sets their innerText property instead of setting innerHTML.

Now, let's discuss the pros and cons of each approach:

Template innerHTML

Pros:

Easy to implement
Fast cloning performance

Cons:

Can be vulnerable to XSS attacks if not sanitized
May lead to unnecessary DOM mutations (e.g., creating a new template element)

DocumentFragment with createTextNode

Pros:

Efficient use of memory, as text nodes are created separately from HTML elements
Faster cloning performance compared to individual HTML elements

Cons:

Requires more code and setup (creating a fragment, appending text nodes)
May lead to additional DOM mutations (e.g., creating a new fragment)

Element creation with innerText

Pros:

Fast and efficient way to set inner content of elements
Reduced risk of XSS attacks due to proper sanitation

Cons:

May lead to slower performance compared to other approaches (cloning individual HTML elements)
More code is required, as each element needs to be created separately.

Other considerations:

The benchmark measures the execution frequency per second (ExecutionsPerSecond), which indicates the overhead of cloning or appending elements.
The results will help determine which approach is fastest and most efficient for rendering HTML content in a specific use case.

As for the libraries used, none are explicitly mentioned in the provided benchmark definition. However, it's worth noting that createTextNode is a method of the Document interface, which is part of the DOM (Document Object Model).

LLMs can make mistakes. Check important info.

I'll break down the benchmark definition and explain what's being tested.

The benchmark is comparing three approaches to create a HTML structure:

1. **Template innerHTML**: This approach uses `innerHTML` property of a `template` element to set its content, which is then cloned and appended to the document body.
2. **DocumentFragment with `createTextNode`**: This approach creates a `DocumentFragment`, populates it with text nodes (using `createTextNode`) and then appends the fragment to the document body.
3. **Element creation with `innerText`**: This approach creates individual HTML elements (e.g., headings, paragraphs, buttons) using `createElement` and sets their `innerText` property instead of setting innerHTML.

Now, let's discuss the pros and cons of each approach:

**Template innerHTML**

Pros:

* Easy to implement
* Fast cloning performance

Cons:

* Can be vulnerable to XSS attacks if not sanitized
* May lead to unnecessary DOM mutations (e.g., creating a new template element)

**DocumentFragment with `createTextNode`**

Pros:

* Efficient use of memory, as text nodes are created separately from HTML elements
* Faster cloning performance compared to individual HTML elements

Cons:

* Requires more code and setup (creating a fragment, appending text nodes)
* May lead to additional DOM mutations (e.g., creating a new fragment)

**Element creation with `innerText`**

Pros:

* Fast and efficient way to set inner content of elements
* Reduced risk of XSS attacks due to proper sanitation

Cons:

* May lead to slower performance compared to other approaches (cloning individual HTML elements)
* More code is required, as each element needs to be created separately.

Other considerations:

* The benchmark measures the execution frequency per second (`ExecutionsPerSecond`), which indicates the overhead of cloning or appending elements.
* The results will help determine which approach is fastest and most efficient for rendering HTML content in a specific use case.

As for the libraries used, none are explicitly mentioned in the provided benchmark definition. However, it's worth noting that `createTextNode` is a method of the `Document` interface, which is part of the DOM (Document Object Model).

Related benchmarks:

template innerHTML vs DocumentFragment vs createElement - createTextNode 2 (version: 0)

Comparing performance of: template vs DocumentFragment createTextNode vs createElement vs createElement createTextNode vs DocumentFragment

Created: 4 years ago by: Guest

Jump to the latest result

template

DocumentFragment createTextNode

createElement

createElement createTextNode

DocumentFragment

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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