Benchmark: removeChild() Loop vs deleteContents() Range API Benchmark

removeChild() Loop vs deleteContents() Range API Benchmark (version: 1)

This benchmark compares two JavaScript methods for removing DOM nodes between sibling elements. One method iteratively removes nodes using a loop and the removeChild() method, while the other leverages the DOM Range API by setting boundaries with setStartAfter() and setEndBefore(), then removing the nodes in one go with deleteContents(). Test cases include scenarios with 1, 5, 20, and 100 intermediate nodes to evaluate performance differences under various conditions.

Comparing performance of: `removeChild (1 child) vs removeChild (5 children) vs removeChild (20 children) vs removeChild (100 children) vs range.deleteContents (1 child) vs range.deleteContents (5 children) vs range.deleteContents (20 children) vs range.deleteContents (100 children)`

Created: one year ago by: Guest

Go to the latest result

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:

removeChild (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; }
removeChild (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; }
removeChild (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; }
removeChild (100 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; }
range.deleteContents (1 child)
const range = document.createRange(); range.setStartAfter(node0); range.setEndBefore(node2); range.deleteContents();
range.deleteContents (5 children)
const range = document.createRange(); range.setStartAfter(node0); range.setEndBefore(node6); range.deleteContents();
range.deleteContents (20 children)
const range = document.createRange(); range.setStartAfter(node0); range.setEndBefore(node21); range.deleteContents();
range.deleteContents (100 children)
const range = document.createRange(); range.setStartAfter(node0); range.setEndBefore(node101); range.deleteContents();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
removeChild (1 child)
removeChild (5 children)
removeChild (20 children)
removeChild (100 children)
range.deleteContents (1 child)
range.deleteContents (5 children)
range.deleteContents (20 children)
range.deleteContents (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

removeChild (1 child)

46.9M/s

removeChild (5 children)

46.0M/s

removeChild (100 children)

43.7M/s

removeChild (20 children)

42.3M/s

range.deleteContents (100 children)

1.9M/s

range.deleteContents (20 children)

1.7M/s

range.deleteContents (1 child)

0/s

range.deleteContents (5 children)

0/s

View exact numbers

Test name	Executions per second
✓ removeChild (1 child)	46,867,512 Ops/sec
removeChild (5 children)	46,049,688 Ops/sec
removeChild (100 children)	43,692,496 Ops/sec
removeChild (20 children)	42,260,520 Ops/sec
range.deleteContents (100 children)	1,925,269 Ops/sec
range.deleteContents (20 children)	1,731,861 Ops/sec
range.deleteContents (1 child)	0 Ops/sec
range.deleteContents (5 children)	0 Ops/sec