Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
insertAdjacentHTML VS append VS appendChild (createDocumentFragment)
(version: 0)
Comparing performance of:
append vs insertAdjacentHTML vs appendChild (createDocumentFragment)
Created:
3 years ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<div id="test"></div>
Tests:
append
let newElement = document.createElement("div"); newElement.id = "testing" let newElementPart = {}; for (i = 0; i < 1000; i++) { newElementPart = document.createElement("div"); newElementPart.classList.add("testClass"); newElement.append(newElementPart); } document.getElementById("test").append(newElement);
insertAdjacentHTML
let html = "<div id='testing'>" for (i = 0; i < 1000; i++) { html += "<div class='testClass'></div>"; } html += "</div>"; document.getElementById("test").insertAdjacentHTML("beforeend", html);
appendChild (createDocumentFragment)
let fragment_VDOM = document.createDocumentFragment(); let newElement = document.createElement("div"); let newElementPart = {}; newElement.id = "testing" for (i = 0; i < 1000; i++) { newElementPart = document.createElement("div"); newElementPart.classList.add("testClass"); newElement.appendChild(newElementPart); } fragment_VDOM.appendChild(newElement); document.getElementById("test").appendChild(fragment_VDOM);
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
append
insertAdjacentHTML
appendChild (createDocumentFragment)
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):
Let's break down the provided benchmarking setup. **Benchmark Overview** The benchmark compares three methods for appending or inserting content into an HTML element: `insertAdjacentHTML`, `appendChild` (without creating a fragment), and `appendChild` (with creating a document fragment). The goal is to determine which method has the best performance characteristics in terms of execution speed. **Options Compared** 1. **insertAdjacentHTML**: This method inserts the provided HTML into the specified position within an element. 2. **appendChild**: Without using a fragment, this method appends a DOM node (in this case, an empty `div`) to the end of its parent element. 3. **appendChild** (with creating a document fragment): Similar to the previous option, but instead of appending an empty `div` directly, it appends the entire fragment (containing multiple elements) at once. **Pros and Cons** 1. **insertAdjacentHTML**: Pros: * Can be more efficient, as it avoids unnecessary DOM node creation and manipulation. * Provides a convenient way to insert HTML fragments into existing content. 2. **appendChild** (without fragment): * Pros: Simple and straightforward implementation. * Cons: + Creates multiple empty `div` nodes, which can lead to increased memory usage and slower performance due to DOM node creation and garbage collection. 3. **appendChild** (with document fragment): * Pros: + Reduces the number of DOM nodes created, as only a single fragment is appended at once. + Can be more efficient in terms of execution speed, since all elements within the fragment are processed together. * Cons: + Requires creating and managing an extra document fragment object. **Library and Special JS Features** The benchmark uses JavaScript's built-in `document` object, specifically the `Element`, `DocumentFragment`, and `createDocumentFragment()` methods. The `insertAdjacentHTML()` method is also used to specify the position where the HTML content should be inserted. **Other Considerations** 1. **DOM Node Creation**: Creating DOM nodes can be an expensive operation in JavaScript. Benchmarking different approaches helps identify the most efficient way to append or insert content into the DOM. 2. **Memory Usage**: The number of DOM nodes created can impact memory usage, especially if the benchmark is run multiple times. Using a document fragment can help reduce this overhead. **Alternatives** Other methods for appending or inserting content into an HTML element include: 1. `innerHTML` and `innerText`: These properties allow you to set the inner HTML or text of an element directly. However, they are not recommended due to security concerns (e.g., XSS vulnerabilities) and potential performance issues. 2. `createElement`, `appendChild`, and then modifying the node's properties: This approach requires creating a new DOM node, appending it to the parent element, and then modifying its properties. While it provides more control over the content, it can be slower than using built-in methods like `insertAdjacentHTML` or `appendChild`. 3. Using a library or framework-specific solution (e.g., React's `React.createElement()`): These solutions often provide optimized performance characteristics for specific use cases but may add dependencies and complexity. Keep in mind that the choice of method depends on the specific requirements of your project, such as performance, memory usage, and ease of maintenance.
Related benchmarks:
JS: insertBefore vs appendChild
JS: insertBefore vs appendChild vs prepend vs insertAdjacentElement
JS: insertBefore vs appendChild vs prepend vs insertAdjacentElement vs after
innerHTML vs insertAdjacentHTML vs appendChild vs insertAdjacentElementasd
appendChild vs append
Comments
Confirm delete:
Do you really want to delete benchmark?