Run results for: removeChild() Loop (front to back vs back to front)

Test name	Executions per second
✓ back to front (20 children)	49,480,708 Ops/sec
back to front (5 children)	48,285,564 Ops/sec
back to front (1 child)	47,787,776 Ops/sec
front to back (1 child)	44,995,764 Ops/sec
back to front (100 children)	44,950,284 Ops/sec
front to back (5 children)	42,898,420 Ops/sec
front to back (100 children)	39,905,940 Ops/sec
front to back (20 children)	39,394,684 Ops/sec

Script Preparation code:

// Create a container div
const container = document.createElement('div');

// Create and append 200 child divs with text
for (let i = 1; i <= 200; i++) {
  const childDiv = document.createElement('div');
  childDiv.textContent = `This is child div number ${i}`;
  container.appendChild(childDiv);
}

// Append the container to the document body
document.body.appendChild(container);

const node0   = container.children[0];
const node2   = container.children[2];
const node6   = container.children[6];
const node21  = container.children[21];
const node101 = container.children[101];

Tests:

front to back (1 child)
let start = node0 let end = node2 let current = start.nextSibling; while (current && current !== end) { const next = current.nextSibling; // Save the next node before removal. current.parentNode.removeChild(current); current = next; }
front to back (5 children)
let start = node0 let end = node6 let current = start.nextSibling; while (current && current !== end) { const next = current.nextSibling; // Save the next node before removal. current.parentNode.removeChild(current); current = next; }
front to back (20 children)
let start = node0 let end = node21 let current = start.nextSibling; while (current && current !== end) { const next = current.nextSibling; // Save the next node before removal. current.parentNode.removeChild(current); current = next; }
front to back (100 children)
let start = node0 let end = node101 let current = start.nextSibling; while (current && current !== end) { const next = current.nextSibling; // Save the next node before removal. current.parentNode.removeChild(current); current = next; }
back to front (1 child)
let start = node0 let end = node2 let current = end.previousSibling; while (current && current !== start) { const prev = current.previousSibling; // Save reference to the previous node. current.parentNode.removeChild(current); current = prev; }
back to front (5 children)
let start = node0 let end = node6 let current = end.previousSibling; while (current && current !== start) { const prev = current.previousSibling; // Save reference to the previous node. current.parentNode.removeChild(current); current = prev; }
back to front (20 children)
let start = node0 let end = node21 let current = end.previousSibling; while (current && current !== start) { const prev = current.previousSibling; // Save reference to the previous node. current.parentNode.removeChild(current); current = prev; }
back to front (100 children)
let start = node0 let end = node101 let current = end.previousSibling; while (current && current !== start) { const prev = current.previousSibling; // Save reference to the previous node. current.parentNode.removeChild(current); current = prev; }

Run results for: removeChild() Loop (front to back vs back to front)

front to back (1 child)

front to back (5 children)

front to back (20 children)

front to back (100 children)

back to front (1 child)

back to front (5 children)

back to front (20 children)

back to front (100 children)