Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
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:
5 years ago
by:
Guest
Jump to the latest result
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());
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);
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);
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);
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>
Run tests (5)
Previous results
Fork
Test case name
Result
template
DocumentFragment createTextNode
createElement
createElement createTextNode
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):
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:
createTextNode vs innerHTML vs innerText
innerText vs createTextNode
DOMParser vs createContextualFragment vs innerHTML vs insertAdjacentHTML vs createContextualFragment Polyfill 2 Large HTML
DOMParser vs template vs createContextualFragment vs innerHTML vs insertAdjacentHTML vs createContextualFragment Polyfill 2 Large HTM
DOMParser vs createContextualFragment vs innerHTML vs insertAdjacentHTML vs createContextualFragment Polyfill vs template vs template insertAdjacentHTML Large HTML
Comments
Confirm delete:
Do you really want to delete benchmark?