Run results for: replaceChildren VS while+appendChild VS replaceChildren+fragment VS innerHTML+fragment VS while+fragment

Test name	Executions per second
✓ replaceChildren w/ fragments	139 Ops/sec
replaceChildren	136 Ops/sec
innerHTML w/ fragments	93 Ops/sec
while w/ fragments	88 Ops/sec
while w/ appendChild	84 Ops/sec

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