Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
template innerHTML vs DocumentFragment createElement without clone
(version: 0)
Comparing performance of:
template vs DocumentFragment
Created:
4 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> `; document.documentElement.appendChild(tpl.content);
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 (2)
Previous results
Fork
Test case name
Result
template
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 provided benchmark and explain what's being tested, compared, and the pros/cons of each approach. **Benchmark Overview** The benchmark compares two approaches for rendering HTML content: 1. **Template InnerHTML**: Using `innerHTML` to set the content of a template element (`template`) directly. 2. **DocumentFragment createElement without clone**: Creating a `DocumentFragment` element and appending child elements to it, then appending the fragment to the document's body. **Pros/Cons of each approach** ### Template InnerHTML Pros: * Simple and straightforward * Fast execution time (no overhead from creating or manipulating DOM nodes) Cons: * Can be slower due to: + DOM node creation and manipulation (e.g., setting `innerHTML`) + Potential browser performance issues with large HTML strings + Security risks if user-inputted content is used in the template ### DocumentFragment createElement without clone Pros: * More efficient than using `innerHTML` since it avoids creating unnecessary DOM nodes * Can lead to better browser performance, especially for larger datasets Cons: * Requires more setup and manipulation of DOM elements (e.g., creating and appending child elements) * May have additional overhead due to: + Document fragment creation and management + Potential browser cache issues with frequent DOM updates **Library/Technology Used** In both test cases, the following libraries/technologies are used: * `innerHTML` is a built-in JavaScript method for setting the content of an element. * `DocumentFragment` is a standard HTML element that allows you to group multiple elements together without actually rendering them in the DOM. No external libraries or frameworks are explicitly mentioned. **Special JS Features/Syntax** The benchmark uses a feature called **template literals**, which was introduced in ECMAScript 2015 (ES6). Template literals allow you to embed expressions inside string literals, making it easier to create complex HTML strings. This feature is not specific to the benchmark but is used in the `innerHTML` assignment. **Alternative Approaches** Other approaches that could be compared include: 1. Using `createElementAndInsert` instead of `appendChild` for better performance. 2. Utilizing a JavaScript library like React or Angular for rendering, which can optimize DOM updates and improve browser performance. 3. Employing server-side rendering (SSR) techniques to render HTML on the server before sending it to the client, rather than using client-side JavaScript. Keep in mind that these alternative approaches might introduce additional complexity, dependencies, or overhead compared to the simple `innerHTML` and `DocumentFragment` methods used in this benchmark.
Related benchmarks:
cloneNode vs DocumentFragment
customElements using Template cloneNode vs. innerHTML
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?