Benchmark: appendChild vs replaceWith, DocumentFragment vs not DocumentFragment 10 elements

appendChild vs replaceWith, DocumentFragment vs not DocumentFragment 10 elements (version: 0)

appendChild vs replaceWith, DocumentFragment vs not DocumentFragment

Comparing performance of: Replacing the entire list with DocumentFragment vs Clearing and using DocumentFragment to append new elements vs Replacing the entire list vs Clearing and appending new elements

Created: 2 years ago by: Guest

Jump to the latest result

HTML Preparation code:

<div><div><div><div><div><div><div><div id='container'></div></div></div></div></div></div></div></div>

Tests:

Replacing the entire list with DocumentFragment
// Assume we have a parent div with id="container" let container = document.getElementById("container"); // Replacing the entire list with DocumentFragment for (let i = 0; i < 1000; i++) { let fragment = document.createDocumentFragment(); let newContainer = document.createElement("div"); let newElement = document.createElement("div"); newElement.textContent = "New Element " + i; newContainer.appendChild(newElement); fragment.appendChild(newContainer); container.replaceWith(fragment); container = newContainer; }
Clearing and using DocumentFragment to append new elements
// Assume we have a parent div with id="container" let container = document.getElementById("container"); // Clearing and using DocumentFragment to append new elements for (let i = 0; i < 1000; i++) { container.innerHTML = ''; let fragment = document.createDocumentFragment(); let newElement = document.createElement("div"); newElement.textContent = "New Element " + i; fragment.appendChild(newElement); container.appendChild(fragment); }
Replacing the entire list
// Assume we have a parent div with id="container" let container = document.getElementById("container"); // Replacing the entire list for (let i = 0; i < 1000; i++) { let newContainer = document.createElement("div"); let newElement = document.createElement("div"); newElement.textContent = "New Element " + i; newContainer.appendChild(newElement); container.replaceWith(newContainer); container = newContainer; }
Clearing and appending new elements
// Assume we have a parent div with id="container" let container = document.getElementById("container"); // Clearing and appending new elements for (let i = 0; i < 1000; i++) { container.innerHTML = ''; let newElement = document.createElement("div"); newElement.textContent = "New Element " + i; container.appendChild(newElement); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Replacing the entire list with DocumentFragment
Clearing and using DocumentFragment to append new elements
Replacing the entire list
Clearing and appending new elements

appendChild vs replaceWith, DocumentFragment vs not DocumentFragment 10 elements (version: 0)

appendChild vs replaceWith, DocumentFragment vs not DocumentFragment

Comparing performance of: Replacing the entire list with DocumentFragment vs Clearing and using DocumentFragment to append new elements vs Replacing the entire list vs Clearing and appending new elements

Created: 2 years ago by: Guest

Jump to the latest result

Replacing the entire list with DocumentFragment

Clearing and using DocumentFragment to append new elements

Replacing the entire list

Clearing and appending new elements

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results