Run results for: moving childNodes from one parent node to another

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36

Browser: Chrome 125

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 2 years ago

loop lastChild and prepend

22.0M/s

loop firstChild and append

21.4M/s

for loop childNodes

16.2M/s

forEach loop childNodes

10.0M/s

View exact numbers

Test name	Executions per second
✓ loop lastChild and prepend	21,991,694 Ops/sec
loop firstChild and append	21,434,180 Ops/sec
for loop childNodes	16,228,322 Ops/sec
forEach loop childNodes	9,966,725 Ops/sec

HTML Preparation code:

<html>

<body></body>

</html>

Script Preparation code:

const CHILDREN_COUNT = 1000;
var containerDom = document.createElement('div');
for (var i = 0; i < CHILDREN_COUNT; i++) {
  containerDom.appendChild(document.createElement('span'));
}
document.body.appendChild(containerDom);
var newContainerDom = document.createElement('div');

Tests:

forEach loop childNodes
const childNodes = containerDom.childNodes; childNodes.forEach(child => { newContainerDom.appendChild(child); });
for loop childNodes
const childNodes = containerDom.childNodes; for (let i = 0, len = childNodes.length; i < len; i++) { const child = childNodes[i]; newContainerDom.appendChild(child); }
loop firstChild and append
let firstChild = containerDom.firstChild; while (firstChild) { newContainerDom.appendChild(firstChild); firstChild = containerDom.firstChild; }
loop lastChild and prepend
let lastChild = containerDom.lastChild; while (lastChild) { newContainerDom.prependChild(lastChild); lastChild = containerDom.lastChild; }