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

Run details:

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

Browser: Chrome 133

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 2 months ago

Test name	Executions per second
front to back (1 child)	44995764.0 Ops/sec
front to back (5 children)	42898420.0 Ops/sec
front to back (20 children)	39394684.0 Ops/sec
front to back (100 children)	39905940.0 Ops/sec
back to front (1 child)	47787776.0 Ops/sec
back to front (5 children)	48285564.0 Ops/sec
back to front (20 children)	49480708.0 Ops/sec
back to front (100 children)	44950284.0 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)