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: 10 months ago by: Guest

Jump to the latest result

HTML Preparation code:

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

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

Script Preparation code:

const node = document.getElementById('container');

for(let i = 0; i < 10000; i++) {
	node.appendChild(document.createElement('div'));
}

​x
 
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);

 
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]);
}

 
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);

 
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);

 
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);

 
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

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

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: 8 months 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 4 months ago):

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:

replaceChildren: This test case uses the replaceChildren method on the DOM element to replace its child nodes with a new array of elements.
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.
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.
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.
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.

LLMs can make mistakes. Check important info.

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

**Benchmark Purpose**

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