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 |
<div id="container"></div>
const node = document.getElementById('container');
for(let i = 0; i < 10000; i++) {
node.appendChild(document.createElement('div'));
}
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'));
}
while (node.firstChild) {
node.removeChild(node.lastChild);
}
for(let i = 0; i < 10000; i++) {
node.appendChild(elems[i]);
}
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.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]);
}
while (node.firstChild) {
node.removeChild(node.lastChild);
}
node.appendChild(fragment);