Benchmark: Remove all children from DOM element-1a

HTML Preparation code:

<div id='messages'></div>

Script Preparation code:

const html = [];
for(i=0; i<1000; i++) {
	html.push("<span>Text</span>");
}
document.getElementById("messages").insertAdjacentHTML('beforeend', html)

Tests:

Remove firstChild
let list = document.getElementById("messages"); while (list.firstChild) { list.removeChild(list.firstChild); }
Remove lastChild
let list = document.getElementById("messages"); while (list.lastChild) { list.removeChild(list.lastChild); }
firstChild.remove
let list = document.getElementById("messages"); while (list.firstChild) { list.firstChild.remove(); }
lastChild.remove
let list = document.getElementById("messages"); while (list.lastChild) { list.lastChild.remove(); }
replaceChildren
let list = document.getElementById("messages"); list.replaceChildren();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Remove firstChild
Remove lastChild
firstChild.remove
lastChild.remove
replaceChildren

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.3.1 Safari/605.1.15

Browser/OS: Safari 18 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Remove firstChild	60353228.0 Ops/sec
Remove lastChild	58729848.0 Ops/sec
firstChild.remove	40299172.0 Ops/sec
lastChild.remove	21240908.0 Ops/sec
replaceChildren	1614000.4 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark defined in the provided JSON focuses on measuring the performance of different methods for removing child elements from a DOM element in JavaScript. The benchmark specifically tests five different approaches to removing child elements from the HTML `<div id='messages'></div>` prepared for the test.

### Approaches Compared

1. **Remove firstChild using `removeChild`**:
   ```javascript
   let list = document.getElementById("messages");
   while (list.firstChild) {
       list.removeChild(list.firstChild);
   }
   ```
   **Pros:**
   - This method is straightforward and conveys exactly what is intended.
   - It is compatible with browsers from older versions.

**Cons:**
   - `removeChild()` can be relatively slower when removing many nodes due to repetitive function calls and potential reflows.

2. **Remove lastChild using `removeChild`**:
   ```javascript
   let list = document.getElementById("messages");
   while (list.lastChild) {
       list.removeChild(list.lastChild);
   }
   ```
   **Pros:**
   - Similar to removing `firstChild`, this method is clear and easy to understand.

**Cons:**
   - Like `firstChild`, it suffers from the same performance drawbacks related to reflows when removing multiple nodes.

3. **Remove firstChild using `remove`**:
   ```javascript
   let list = document.getElementById("messages");
   while (list.firstChild) {
       list.firstChild.remove();
   }
   ```
   **Pros:**
   - Using the `remove()` method can be slightly more semantic, clearly indicating that you are removing the element itself.

**Cons:**
   - Similar to `removeChild()`, invoking `remove()` also results in the same potential performance overhead.

4. **Remove lastChild using `remove`**:
   ```javascript
   let list = document.getElementById("messages");
   while (list.lastChild) {
       list.lastChild.remove();
   }
   ```
   **Pros:**
   - This performs similarly to the `firstChild.remove()` example.

**Cons:**
   - It incurs the same performance costs as the previous methods.

5. **Use of `replaceChildren`**:
   ```javascript
   let list = document.getElementById("messages");
   list.replaceChildren();
   ```
   **Pros:**
   - This method is designed to remove all child elements in one call, which can be significantly more efficient than looping through and removing them one at a time.
   - It eliminates multiple reflows, as it operates in a single operation.

**Cons:**
   - While modern browsers support this method, older browsers may not, leading to potential compatibility issues.

### Performance Results

The benchmark results indicate that removing the last child and first child using `removeChild` was the most efficient, achieving around 3.98 million executions per second and 3.96 million respectively. The `replaceChildren` method, although conceptually superior for removing multiple elements, performed significantly slower in this specific test scenario with approximately 1.56 million executions per second.

### Considerations and Alternatives

- **Performance Implications**: When dealing with a large number of child elements, looping through and removing them one by one can create performance bottlenecks due to the potential for multiple layout reflows. `replaceChildren()` could be more optimal in a real-world scenario, especially if you need to clear all children.
  
- **Browser Compatibility**: If targeting a wide range of browsers, using methods like `removeChild()` may be more appropriate for compatibility, even though their performance may suffer when clearing many children repeatedly.

- **Alternative Approaches**: Besides the methods tested, other considerations could include:
   - **DocumentFragment**: Building a new set of nodes off-DOM and replacing the entire parent element could improve performance if multiple additions or modifications are needed.
   - **JQuery**: For those using jQuery, methods like `empty()` could be alternatives, although they might introduce their abstractions and performance characteristics.

Choosing the appropriate method requires weighing performance implications against code clarity and browser compatibility based on the specific use case.

Related benchmarks:

Remove all children from DOM element-1a (version: 0)

Comparing performance of: Remove firstChild vs Remove lastChild vs firstChild.remove vs lastChild.remove vs replaceChildren

Created: 6 months ago by: Guest

Jump to the latest result

Remove firstChild

Remove lastChild

firstChild.remove

lastChild.remove

replaceChildren

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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