Test name | Executions per second |
---|---|
replaceChild | 0.0 Ops/sec |
replaceChildren | 955865.7 Ops/sec |
append documentFragment | 1179523.6 Ops/sec |
<div id="container"></div>
var elements = [document.createElement('div'), document.createElement('div')];
var fragment = document.createDocumentFragment();
var container = document.getElementById('container');
elements.forEach(element => fragment.appendChild(element));
container.appendChild(fragment);
var changeIndex = 1;
elements[changeIndex] = document.createElement('div');
var newChildren = document.createDocumentFragment();
elements.forEach(element => newChildren.appendChild(element));
container.replaceChild(elements[changeIndex], container.children[changeIndex]);
var changeIndex = 1;
elements[changeIndex] = document.createElement('div');
var newChildren = document.createDocumentFragment();
elements.forEach(element => newChildren.appendChild(element));
container.replaceChildren(elements)
var changeIndex = 1;
elements[changeIndex] = document.createElement('div');
var newChildren = document.createDocumentFragment();
elements.forEach(element => newChildren.appendChild(element));
container.replaceChildren(newChildren)