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: 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
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

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

LLMs can make mistakes. Check important info.

### Overview of the Benchmark

The benchmark evaluates the performance of removing child elements from a parent `div` in two different traversal orders: **front to back** and **back to front**. The performance is measured by the number of executions per second for several test cases using different numbers of children.

### Test Cases and Options Compared

The benchmark consists of eight distinct test cases:

1. **Front to Back:**
   - Removes child nodes starting from the first child and moving toward the last child.
   - Test cases vary by the number of child elements removed, ranging from 1 to 100:
     - Removing 1 child
     - Removing 5 children
     - Removing 20 children
     - Removing 100 children

2. **Back to Front:**
   - Removes child nodes starting from the last child and moving toward the first child.
   - Similar number of child removal, with variations from 1 to 100:
     - Removing 1 child
     - Removing 5 children
     - Removing 20 children
     - Removing 100 children

### Pros and Cons of Each Approach

#### Front to Back
- **Pros:**
  - Simplicity: Traverses the DOM from the beginning to the end, which can be conceptually easier for developers.
  - Intuitive for scenarios where elements are being removed in a standard FIFO (first-in-first-out) manner.

- **Cons:**
  - Can lead to performance issues as modifying the DOM affects the remaining elements. The index of sibling nodes changes as each child is removed, which could result in higher overhead in accessing the next sibling.

#### Back to Front
- **Pros:**
  - More efficient in scenarios where the child elements being removed are many in sequence. The remaining elements are less affected by the removal as we start from the end.
  - Since no older nodes are being repositioned during the traversal, traversal times can be reduced.

- **Cons:**
  - Slightly counterintuitive for developers not familiar with the concept, as the logic may appear backwards.

### Other Considerations

- **Performance Variation:** The number of nodes being removed in a single traversal will significantly influence performance, as observed in the results. More nodes generally lead to more time consumed, though the efficiency of back-to-front could yield better results at scale.

- **Browser Variability:** Performance can differ based on the browser and its rendering engine. The current tests are performed on Chrome, and results might vary with other browsers like Firefox or Safari.

### Libraries and Special Features Used

No specific libraries are used in this benchmark as it relies solely on native JavaScript methods to manipulate the DOM. The removal of DOM nodes is performed using the `removeChild()` method of the parent node, which is a built-in JavaScript feature designed for manipulating HTML elements.

### Alternatives

- **Batch Operations:** Instead of removing nodes one by one, consider using a batch approach where nodes are collected and removed in a single operation, potentially improving performance.

- **Virtual DOM Libraries:** In scenarios involving complex UI updates, libraries like React employ a virtual DOM to minimize direct manipulation of the actual DOM, thus improving performance when many elements need to be added or removed quickly.

- **Web Components:** Utilize web components or frameworks that encapsulate DOM trimming and performance optimization to improve UI interactivity while managing overall performance.

### Conclusion

This benchmark serves as a practical exploration of DOM manipulation strategies in JavaScript, illustrating how different approaches influence performance. By understanding these dynamics, developers can make informed choices when manipulating the DOM, thus optimizing their applications.

Related benchmarks:

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

Jump 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>

Experimental features:

Fastest: N/A

Slowest: N/A

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