Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
replaceChildren vs while w/ appendChild 2
(version: 0)
replaceChildren vs while w/ appendChild
Comparing performance of:
while w/ appendChild vs replaceChildren
Created:
2 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div id="container"></div>
Script Preparation code:
const node = document.getElementById('container'); for(let i = 0; i < 10000; i++) { node.appendChild(document.createElement('div')); }
Tests:
while w/ appendChild
const node = document.getElementById('container'); const fragment = document.createDocumentFragment(); for(let i = 0; i < 10000; i++) { fragment.appendChild(document.createElement('div')); } while (node.firstChild) { node.removeChild(node.lastChild); } node.appendChild(fragment);
replaceChildren
const node = document.getElementById('container'); const fragment = document.createDocumentFragment(); for(let i = 0; i < 10000; i++) { fragment.appendChild(document.createElement('div')); } node.replaceChildren(fragment);
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
while w/ appendChild
replaceChildren
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
2 years ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36
Browser/OS:
Chrome 125 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=524162" width="100%" height="500px"></iframe>
replaceChildren
142/s
while w/ appendChild
118/s
View exact numbers
Test name
Executions per second
✓
replaceChildren
142 Ops/sec
while w/ appendChild
118 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
I'd be happy to help explain the provided JavaScript benchmark. **Benchmark Overview** The provided benchmark measures the performance difference between two approaches: `replaceChildren` and `while` with `appendChild`. The benchmark creates a container element, appends 10,000 div elements to it using `appendChild`, and then removes all child nodes from the container using either `replaceChildren` or a `while` loop with `appendChild`. **Options Compared** The two options being compared are: 1. **`replaceChildren`**: This method replaces the entire contents of an element with new content. In this benchmark, it's used to replace the 10,000 div elements appended to the container. 2. **`while` with `appendChild`**: This approach uses a loop to append child nodes to the container and then removes all child nodes using `removeChild`. **Pros and Cons** * **`replaceChildren`**: + Pros: Generally faster than appending individual elements, as it only requires updating the element's contents. + Cons: Can be slower for very large numbers of elements if the browser needs to allocate a new DOM tree. * **`while` with `appendChild`**: + Pros: Can be more efficient for small to medium-sized numbers of elements, as it avoids allocating a new DOM tree. + Cons: Requires more CPU cycles to remove all child nodes and then append new ones. **Library Usage** Neither of the benchmark options uses any external libraries. The `document.createDocumentFragment()` method is used to create a document fragment, which allows for efficient appending of elements without updating the entire DOM tree. **Special JS Feature/Syntax** None of the benchmark options use special JavaScript features or syntax that would affect performance. However, it's worth noting that the use of `while` loops and `appendChild` can be optimized using modern JavaScript features like `for...of` loops and `push()` methods. **Other Alternatives** Other approaches to appending elements without updating the DOM tree include: 1. **Using a `MutationObserver`**: This involves observing mutations to the container element and only updating its contents when changes are detected. 2. **Using a library like React or Angular**: These libraries provide optimized solutions for managing large numbers of DOM elements, often using techniques like virtual DOMs or incremental updates. Keep in mind that these alternatives may have different performance characteristics depending on the specific use case and browser support.
Related benchmarks
innerhtml vs removechild(firstChild) vs removechild(lastChild) vs innerText vs replaceChildren()
replaceChildren vs while w/ appendChild
replaceChildren VS while+appendChild VS replaceChildren+fragment VS innerHTML+fragment VS while+fragment
clear element using replaceChildren vs removeChild
Comments
Confirm delete:
Do you really want to delete benchmark?