Benchmark: replaceChildren vs while w/ appendChild

HTML Preparation code:

<div id="container"></div>

Script Preparation code:

const node = document.getElementById('container');
const fragment = document.createDocumentFragment();

for(let i = 0; i < 10000; i++) {
	node.appendChild(document.createElement('div'));
	fragment.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: 7 months 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.3 Ops/sec
replaceChildren	138.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark is designed to compare two approaches for removing and replacing child nodes in an HTML element:

1. `replaceChildren` (Method 1)
2. Using a `while` loop with `appendChild` (Method 2)

**What's Being Tested**

In both methods, the goal is to create a large number of DOM elements (`div`) and append them to two separate containers: `node` and `fragment`. Then, one of the methods is used to remove all child nodes from `node`, and the remaining fragment is appended back to `node`.

**Method 1: replaceChildren**

This method uses the `replaceChildren()` method on the `node` element, which replaces its child nodes with a new set of child nodes. The fragment containing the elements is passed as an argument.

**Pros and Cons**

Pros:

* Efficient, as it only requires a single operation to remove all child nodes.
* No need for explicit loop or conditional statements.

Cons:

* May incur additional overhead due to the creation of a temporary DOM document fragment.
* May not be supported by older browsers or those with limited JavaScript capabilities.

**Method 2: while loop with appendChild**

This method uses a `while` loop to repeatedly remove child nodes from `node` using `removeChild()` and append new elements to both `node` and `fragment` using `appendChild()`. The loop continues until all child nodes have been removed.

Pros:

* Wide browser support, as it's a standard JavaScript method.
* No additional overhead for creating a temporary document fragment.

Cons:

* Inefficient, as it requires multiple operations (removal and replacement) per iteration.
* May introduce unnecessary DOM mutations.

**Library Usage**

In both benchmark definitions, the `document` object is used to access HTML elements and methods. Specifically:

* `document.getElementById()` is used to retrieve an element by its ID.
* `document.createDocumentFragment()` is used to create a new document fragment for storing child nodes.
* `appendChild()` and `removeChild()` are used to manipulate the DOM.

**Special JS Features or Syntax**

None mentioned in the provided benchmark definitions. However, it's worth noting that other JavaScript features, such as `for...of` loops, async/await, or modern ES6+ syntax, might be used in other benchmarks to test specific browser capabilities.

**Alternatives**

Other alternatives for removing and replacing child nodes include:

* Using a library like jQuery or React, which provide their own optimized methods for DOM manipulation.
* Utilizing Web Workers or Service Workers to offload DOM tasks and improve performance.
* Employing more advanced techniques, such as using `requestAnimationFrame()` or `setTimeout()` to optimize DOM updates.

Keep in mind that the choice of approach depends on the specific use case, browser requirements, and desired performance characteristics.

Related benchmarks:

replaceChildren vs while w/ appendChild (version: 0)

replaceChildren vs while w/ appendChild

Comparing performance of: while w/ appendChild vs replaceChildren

Created: 7 months ago by: Guest

Jump to the latest result

while w/ appendChild

replaceChildren

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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