Benchmark: removeChild() Loop (front to back vs back to front)

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; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
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)

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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/OS: Chrome 133 on Mac OS X 10.15.7

View result in a separate tab

back to front (20 children)

49.5M/s

back to front (5 children)

48.3M/s

back to front (1 child)

47.8M/s

front to back (1 child)

45.0M/s

back to front (100 children)

45.0M/s

front to back (5 children)

42.9M/s

front to back (100 children)

39.9M/s

front to back (20 children)

39.4M/s

View exact numbers

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

removeChild() Loop (front to back vs back to front) (version: 1)

Comparing performance of: `front to back (1 child) vs front to back (5 children) vs front to back (20 children) vs front to back (100 children) vs back to front (1 child) vs back to front (5 children) vs back to front (20 children) vs back to front (100 children)`

Created: one year ago by: Guest

Go to the latest result

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)

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

removeChild() Loop (front to back vs back to front) (version: 1)

Comparing performance of: front to back (1 child) vs front to back (5 children) vs front to back (20 children) vs front to back (100 children) vs back to front (1 child) vs back to front (5 children) vs back to front (20 children) vs back to front (100 children)

Created: one year ago by: Guest

Go to the latest result

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)

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Related benchmarks

Comparing performance of: `front to back (1 child) vs front to back (5 children) vs front to back (20 children) vs front to back (100 children) vs back to front (1 child) vs back to front (5 children) vs back to front (20 children) vs back to front (100 children)`