Benchmark: replaceChildren VS while+appendChild VS replaceChildren+fragment VS innerHTML+fragment VS while+fragment

replaceChildren VS while+appendChild VS replaceChildren+fragment VS innerHTML+fragment VS while+fragment (version: 0)

replaceChildren VS while+appendChild VS replaceChildren+fragment VS innerHTML+fragment VS while+fragment

Comparing performance of: replaceChildren vs while w/ appendChild vs replaceChildren w/ fragments vs innerHTML w/ fragments vs while w/ fragments

Created: one year ago by: Guest

Jump 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:

replaceChildren
const node = document.getElementById('container'); const elems = []; for(let i = 0; i < 10000; i++) { elems.push(document.createElement('div')); } node.replaceChildren(...elems);
while w/ appendChild
const node = document.getElementById('container'); const elems = []; for(let i = 0; i < 10000; i++) { elems.push(document.createElement('div')); } while (node.firstChild) { node.removeChild(node.lastChild); } for(let i = 0; i < 10000; i++) { node.appendChild(elems[i]); }
replaceChildren w/ fragments
const fragment = document.createDocumentFragment(); const node = document.getElementById('container'); const elems = []; for(let i = 0; i < 10000; i++) { elems.push(document.createElement('div')); } for(let i = 0; i < 10000; i++) { fragment.appendChild(elems[i]); } node.replaceChildren(fragment);
innerHTML w/ fragments
const fragment = document.createDocumentFragment(); const node = document.getElementById('container'); const elems = []; for(let i = 0; i < 10000; i++) { elems.push(document.createElement('div')); } for(let i = 0; i < 10000; i++) { fragment.appendChild(elems[i]); } node.innerHTML = ''; node.appendChild(fragment);
while w/ fragments
const fragment = document.createDocumentFragment(); const node = document.getElementById('container'); const elems = []; for(let i = 0; i < 10000; i++) { elems.push(document.createElement('div')); } for(let i = 0; i < 10000; i++) { fragment.appendChild(elems[i]); } while (node.firstChild) { node.removeChild(node.lastChild); } node.appendChild(fragment);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
replaceChildren
while w/ appendChild
replaceChildren w/ fragments
innerHTML w/ fragments
while w/ fragments

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/126.0.0.0 Safari/537.36 Edg/126.0.0.0

Browser/OS: Chrome 126 on Windows

View result in a separate tab

Test name	Executions per second
replaceChildren	114.4 Ops/sec
while w/ appendChild	112.6 Ops/sec
replaceChildren w/ fragments	114.4 Ops/sec
innerHTML w/ fragments	142.4 Ops/sec
while w/ fragments	102.7 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the explanation of the provided benchmark.

**Benchmark Purpose**

The benchmark is designed to compare the performance of different approaches for replacing child nodes in a DOM element. The test cases aim to measure which method is fastest, most efficient, and potentially suitable for use in real-world web applications.

**Test Cases**

There are six individual test cases:

1. **replaceChildren**: This test case uses the `replaceChildren` method on the DOM element to replace its child nodes with a new array of elements.
2. **while+appendChild**: This test case uses a while loop to remove all child nodes from the element using `removeChild` and then appends new child nodes using `appendChild`.
3. **replaceChildren+fragment**: This test case uses a fragment (a lightweight container for DOM nodes) to replace child nodes, which can be more efficient than creating new elements individually.
4. **innerHTML+fragment**: This test case uses the `innerHTML` property to set the inner HTML of the element, followed by appending a fragment containing the new child nodes.
5. **while+fragment**: This test case is similar to the previous one but uses a fragment for more efficient removal and replacement of child nodes.

**Library and Functions Used**

* None explicitly mentioned in the benchmark definition, but it's assumed that `document.getElementById`, `Array.prototype.push`, and `DOM Element.prototype.replaceChildren` are used.

**Special JS Features/Syntax**

None mentioned or used in this benchmark. The focus is on comparing different DOM manipulation approaches.

**Other Considerations**

When choosing a replacement method for child nodes:

* **replaceChildren**: Simple, efficient, and suitable for most cases.
* **while+appendChild**: Can be slower due to repeated removals and appendings of individual nodes.
* **replaceChildren+fragment**: More efficient than the while loop version, as it uses a lightweight fragment container.
* **innerHTML+fragment**: May not be suitable for large datasets or complex layouts, as it can lead to inefficient use of resources.

**Alternative Approaches**

Other possible approaches for replacing child nodes might include:

* Using `DOMTraversals` (e.g., `traverse()`, `childList`) for more efficient iteration over child nodes.
* Leveraging modern JavaScript features like `Template Literals` or `Function Expressions` to create and manipulate DOM elements.
* Exploring alternative libraries or frameworks that offer optimized DOM manipulation APIs.

Keep in mind that the choice of approach depends on specific use cases, performance requirements, and compatibility considerations.

Related benchmarks: