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

Run details:

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: Chrome 126

Operating system: Windows

Device Platform: Desktop

Date tested: 8 months ago

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

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