Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
template innerHTML vs DocumentFragment createElement
(version: 0)
Comparing performance of:
template vs DocumentFragment
Created:
5 years ago
by:
Registered User
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
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:
Run details:
(Test run date:
4 months ago
)
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Safari/537.36
Browser/OS:
Chrome 141 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
Test name
Executions per second
template
216549.3 Ops/sec
DocumentFragment
329974.4 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year 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** 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:
createElement vs createContextualFragment
DOMParser vs createContextualFragment vs innerHTML vs insertAdjacentHTML vs createContextualFragment Polyfill 2 Large HTML
template innerHTML vs DocumentFragment createElement without clone
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?