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: 2 months ago by: Guest

Jump 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: 2 months 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

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

Autogenerated LLM Summary (model gpt-4o-mini, generated 2 months ago):

LLMs can make mistakes. Check important info.

### Benchmark Overview

This benchmark compares two different methods for removing multiple DOM nodes in JavaScript. The two methods evaluated are:

1. **`removeChild()` Method**: An iterative approach using a loop to remove nodes one at a time.
2. **`Range API`**: A more modern approach that utilizes the DOM Range API to remove nodes efficiently in bulk.

### Test Cases and Their Descriptions

1. **removeChild (1 child)**: Tests how quickly one child node can be removed using the `removeChild()` method.
2. **removeChild (5 children)**: Evaluates the performance when removing five child nodes.
3. **removeChild (20 children)**: Measures the time taken to remove twenty child nodes.
4. **removeChild (100 children)**: Assesses performance with the removal of one hundred child nodes.
5. **range.deleteContents (1 child)**: Uses the Range API to delete a single child node and measures its performance.
6. **range.deleteContents (5 children)**: Removes five child nodes at once using the Range API.
7. **range.deleteContents (20 children)**: Deletes twenty child nodes with the Range API.
8. **range.deleteContents (100 children)**: Evaluates the Range API's efficiency when deleting one hundred child nodes.

### Method Comparisons

#### 1. **`removeChild()` Method**

- **Pros**:
  - Simple and straightforward to implement.
  - Works well for individual nodes or when only a few nodes need to be removed.
  
- **Cons**:
  - Performance declines with the number of nodes to be removed. Each call to `removeChild()` involves reflow and repaint, which can be costly in terms of performance.
  - Requires looping through each node individually, leading to increased time complexity.

#### 2. **`Range API`**

- **Pros**:
  - Allows for batch removal of nodes in a single operation (`deleteContents()`), which minimizes DOM manipulations and, therefore, better performance as it reduces reflow and repaint costs.
  - More expressive and semantically clear for operations involving ranges of nodes.

- **Cons**:
  - Slightly more complex to set up, as it involves defining a range and setting start and end parameters.
  - May not be supported in all older browsers (though most modern browsers have adopted it).

### Benchmark Results

- The results indicate that the `removeChild()` method performs quite well with 1 child, but the performance decreases significantly as the number of children increases.
- In contrast, the results for the `Range API` (specifically `deleteContents()`) are poor for smaller node counts, recording 0.0 executions per second in both 1 and 5 child cases, but it performs somewhat better when removing larger node counts of 20 and 100.
- This underlines that, while the Range API is designed for efficiency, it might incur overhead that isn't justified for small operations where simpler methods might suffice.

### Other Alternatives

1. **Document Fragment**: If you need to remove and then add nodes, consider using a Document Fragment to minimize DOM updates.
2. **Cloning Nodes**: For specific scenarios where nodes need to be manipulated separately before removal, cloning nodes can be an approach, though it is not directly a method for removal.
3. **Batch Operations**: Where frameworks or libraries like React, Vue.js, etc., handle node removal as part of virtual DOM reconciliation processes can provide better performance and abstraction over direct DOM manipulations.

In summary, this benchmark illustrates the trade-offs between traditional DOM node removal techniques and the use of modern APIs, emphasizing the importance of context when selecting an approach, particularly regarding the number of DOM nodes involved.

Related benchmarks:

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

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: 2 months ago by: Guest

Jump to the latest 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)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 2 months ago):