Run details:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36
Chrome 125
Windows
Desktop
10 months ago
Test name Executions per second
replaceChildren 126.1 Ops/sec
while w/ appendChild 126.4 Ops/sec
replaceChildren w/ fragments 149.4 Ops/sec
innerHTML w/ fragments 170.4 Ops/sec
while w/ fragments 123.2 Ops/sec
HTML Preparation code:
AخA
 
1
<div id="container"></div>
Script Preparation code:
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);
  • 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);