Benchmark: replaceChildren vs while w/ appendChild 2

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>

Previous results

Test case name	Result
while w/ appendChild
replaceChildren

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year 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

Test name	Executions per second
while w/ appendChild	118.0 Ops/sec
replaceChildren	141.7 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

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:

replaceChildren vs while w/ appendChild 2 (version: 0)

replaceChildren vs while w/ appendChild

Comparing performance of: while w/ appendChild vs replaceChildren

Created: one year ago by: Guest

Jump to the latest result

while w/ appendChild

replaceChildren

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):