Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
insertAdjacentHTML VS append VS appendChild (createDocumentFragment) [MINIMAL]
(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"); let DOM = document.body; for (i = 0; i < 1000; i++) { DOM.append(newElement); }
insertAdjacentHTML
let newElement = "<div></div>" let DOM = document.body; for (i = 0; i < 1000; i++) { DOM.insertAdjacentHTML("beforeend", newElement); }
appendChild (createDocumentFragment)
let fragment_VDOM = document.createDocumentFragment(); let newElement = document.createElement("div"); let DOM = document.body; for (i = 0; i < 1000; i++) { fragment_VDOM.appendChild(newElement); DOM.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 dive into the benchmark and explain what's being tested. The provided JSON represents three test cases, each comparing different approaches to append or insert HTML content into a web page: 1. **append**: This test case compares the performance of directly appending an element to the `body` element using `DOM.append()`. 2. **insertAdjacentHTML**: This test case compares the performance of inserting HTML content at a specific position in the DOM tree using `DOM.insertAdjacentHTML()` with the `beforeend` argument. 3. **appendChild (createDocumentFragment)**: This test case compares the performance of appending an element to a `createDocumentFragment()` object and then appending that fragment to the `body` element. Now, let's discuss the pros and cons of each approach: * **append**: This method is simple and straightforward but can be less efficient than other methods due to its direct manipulation of the DOM tree. On the plus side, it doesn't require any extra memory allocation or object creation. * **insertAdjacentHTML**: This method is more efficient than directly appending an element because it uses a caching mechanism that reduces the number of DOM mutations. However, it does require some extra overhead due to the additional function call and string manipulation. Additionally, it's a bit slower on older browsers. * **appendChild (createDocumentFragment)**: This method is often considered the most efficient way to append elements to the DOM tree because it minimizes the number of DOM mutations. The `createDocumentFragment()` object allows you to batch together multiple DOM operations and then apply them all at once, reducing the overall number of DOM updates. Pros: * Minimizes DOM mutations * Can be faster due to caching Cons: * Requires extra memory allocation for the fragment object * May have slower startup times due to the creation of the fragment object Other considerations: * **DOM traversal**: The `insertAdjacentHTML` method uses a more efficient algorithm to traverse the DOM tree, which can result in better performance on large documents. * **Browser cache**: Modern browsers often cache frequently accessed functions and methods, including `insertAdjacentHTML`. This can reduce the overhead of repeated calls to this function. In terms of special JS features or syntax, there aren't any explicitly mentioned. However, it's worth noting that the use of `createDocumentFragment()` requires a good understanding of how DOM fragments work and when they should be used. The benchmark results show that: * **append** is the slowest method, likely due to its direct manipulation of the DOM tree. * **insertAdjacentHTML** is faster than **append**, but slower than **appendChild (createDocumentFragment)**. * The performance differences between these methods are relatively small, and the exact ranking may depend on the specific use case and browser being used. Other alternatives that could be considered for similar benchmarking include: * Using `DOM.insertAdjacentElement()` instead of `insertAdjacentHTML` * Comparing the performance of different DOM mutation methods (e.g., `DOM.appendChild()`, `DOM.removeChild()`) * Adding more complex test cases, such as appending multiple elements or using animations to simulate real-world scenarios.
Related benchmarks:
append vs appendChild + createTextNode
JS: append vs appendChild
JS: insertBefore vs appendChild
innerHTML vs insertAdjacentHTML vs appendChild vs insertAdjacentElementasd
appendChild vs append
Comments
Confirm delete:
Do you really want to delete benchmark?