Test name | Executions per second |
---|---|
Cherrypick append child | 765693.4 Ops/sec |
Using documentFragment, append new & reuse old children | 400501.4 Ops/sec |
replaceChildren method | 813957.1 Ops/sec |
<div id='test-element'></div>
var elements = [document.createElement('div'), document.createElement('div')];
var fragment = document.createDocumentFragment();
var container = document.getElementById('test-element');
elements.forEach(element => fragment.appendChild(element));
container.appendChild(fragment);
var changeIndex = 1;
elements[changeIndex] = document.createElement('div');
container.replaceChild(elements[changeIndex], container.children[changeIndex]);
var changeIndex = 1;
var newChildren = document.createDocumentFragment();
elements[changeIndex] = document.createElement('div');
elements.forEach(element => newChildren.appendChild(element));
while(container.firstChild) {
container.firstChild.remove();
}
container.appendChild(newChildren)
var changeIndex = 1;
elements[changeIndex] = document.createElement('div');
container.replaceChildren(elements)