Benchmark: appendChild vs replaceWith, DocumentFragment vs not DocumentFragment

appendChild vs replaceWith, DocumentFragment vs not DocumentFragment (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: one month 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

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

appendChild vs replaceWith, DocumentFragment vs not DocumentFragment (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: one month 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>

Experimental features:

Fastest: N/A

Slowest: N/A

No previous run results