Run results for: removeChild() Loop vs deleteContents() Range API Benchmark

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.

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
removeChild (1 child)	46867512.0 Ops/sec
removeChild (5 children)	46049688.0 Ops/sec
removeChild (20 children)	42260520.0 Ops/sec
removeChild (100 children)	43692496.0 Ops/sec
range.deleteContents (1 child)	0.0 Ops/sec
range.deleteContents (5 children)	0.0 Ops/sec
range.deleteContents (20 children)	1731861.2 Ops/sec
range.deleteContents (100 children)	1925269.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:

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();

Run results for: removeChild() Loop vs deleteContents() Range API Benchmark

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)