Benchmark: Remove all children from DOM node 2

HTML Preparation code:

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

Script Preparation code:

let list = document.getElementById("messages");
for(i=0; i<1000; i++) {
	list.innerHTML += "<span>Text</span>"
}

Tests:

Remove firstChild
let list = document.getElementById("messages"); while (list.firstChild) { list.removeChild(list.firstChild); }
Remove lastChild
let list = document.getElementById("messages"); while (list.firstChild) { list.removeChild(list.firstChild); }
innerHTML
document.getElementById("messages").innerHTML = "";
innerText
document.getElementById("messages").innerText = "";
textContent
document.getElementById("messages").textContent = "";
firstChild.remove
let list = document.getElementById("messages"); while (list.firstChild) { list.firstChild.remove() }
range
var range = new Range(); range.selectNodeContents(document.getElementById("messages")); range.deleteContents();
replaceChildren
let list = document.getElementById("messages"); list.replaceChildren();
for of childNodes
let list = document.getElementById("messages"); for (const node of [...list.childNodes]) { node.remove() }
while childNodes
let list = document.getElementById("messages"); while (list.childNodes[0]) { list.childNodes[0].remove(); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Remove firstChild
Remove lastChild
innerHTML
innerText
textContent
firstChild.remove
range
replaceChildren
for of childNodes
while childNodes

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 months ago)

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 132 on Android

View result in a separate tab

Test name	Executions per second
Remove firstChild	8027687.5 Ops/sec
Remove lastChild	8183105.0 Ops/sec
innerHTML	5106479.0 Ops/sec
innerText	2784382.0 Ops/sec
textContent	4347687.5 Ops/sec
firstChild.remove	8121705.5 Ops/sec
range	922462.8 Ops/sec
replaceChildren	3310581.0 Ops/sec
for of childNodes	1736135.9 Ops/sec
while childNodes	2798237.5 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark defined in the provided JSON tests various methods for removing all children from a DOM element, specifically from a `<div>` with the id `messages`. The benchmark includes a preparation step that populates the `messages` div with 1000 `<span>` elements before conducting the tests.

### Test Cases and Approaches Compared

Here are the different methods tested for clearing the content of the `messages` div:

1. **Remove firstChild**:
   ```javascript
   while (list.firstChild) {
       list.removeChild(list.firstChild);
   }
   ```
   - **Pros**: Straightforward and clear; operates directly with the DOM.
   - **Cons**: Can be inefficient as it accesses and modifies the DOM for each child individually.

2. **Remove lastChild**:
   ```javascript
   while (list.firstChild) {
       list.removeChild(list.firstChild);
   }
   ```
   - **Pros**: Same as the `remove firstChild` in terms of simplicity.
   - **Cons**: Similar inefficiency issues, especially on large DOM trees.

3. **innerHTML**:
   ```javascript
   document.getElementById("messages").innerHTML = "";
   ```
   - **Pros**: Fastest approach; replaces the inner content in one operation.
   - **Cons**: Can lead to performance issues in terms of security (XSS attacks) if input isn't controlled.

4. **innerText**:
   ```javascript
   document.getElementById("messages").innerText = "";
   ```
   - **Pros**: Clears text content while maintaining the structure of DOM elements.
   - **Cons**: Slower than innerHTML since it captures all textual content, it may also not work on non-textual elements.

5. **textContent**:
   ```javascript
   document.getElementById("messages").textContent = "";
   ```
   - **Pros**: Similar to innerText, but clears all text nodes efficiently.
   - **Cons**: Will not trigger any reflow or repaint that innerHTML might.

6. **firstChild.remove()**:
   ```javascript
   while (list.firstChild) {
       list.firstChild.remove();
   }
   ```
   - **Pros**: Cleaner and more modern syntax with each node removed.
   - **Cons**: Still potentially slower due to repeated DOM accesses.

7. **Range API**:
   ```javascript
   var range = new Range();
   range.selectNodeContents(document.getElementById("messages"));
   range.deleteContents();
   ```
   - **Pros**: A more complex way of manipulating the DOM that can be more efficient in some cases.
   - **Cons**: Overhead of creating a range is not ideal for simpler operations.

8. **replaceChildren**:
   ```javascript
   list.replaceChildren();
   ```
   - **Pros**: Designed for replacing all children at once and more efficient than iterative approaches.
   - **Cons**: Compatibility could be an issue with older browsers.

9. **for of childNodes**:
   ```javascript
   for (const node of [...list.childNodes]) {
       node.remove();
   }
   ```
   - **Pros**: Easier to read and understand using ES6 syntax.
   - **Cons**: Still runs into performance issues by removing nodes one by one.

10. **while childNodes**:
    ```javascript
    while (list.childNodes[0]) {
        list.childNodes[0].remove();
    }
    ```
    - **Pros**: Simple while loop that's easy to follow.
    - **Cons**: As with others that iterate through children, potentially slow to execute.

### Summary of Performance Results

From the benchmark results, the fastest methods were `remove firstChild` and `remove lastChild`, both executing around 7.8 million operations per second, followed by the `firstChild.remove()` method. The `innerHTML` approach was also quite fast but was less efficient in performance and security terms compared to direct DOM manipulations. The `replaceChildren` method performed poorly comparatively, indicating slower performance possibly due to browser implementations or less optimization for bulk operations.

### Other Considerations

1. **Browser Compatibility**: Some methods may not be supported in older browsers. For instance, `replaceChildren` and the `Range` API have varying degrees of support.
2. **Security**: Direct DOM manipulation like `innerHTML` can expose applications to XSS attacks if not handled carefully. 
3. **Memory Management**: Techniques that involve repetitive DOM access can lead to performance degradation in large DOM trees, impacting memory management and rendering.

### Alternatives

Alternatives to the approaches used in this benchmark could include the use of JavaScript libraries like jQuery, which abstract away some of the complexities involved in DOM manipulations. Methods like `jQuery.empty()` or `jQuery.html('')` could provide a more user-friendly API at the potential cost of performance due to extra overhead associated with the library.

Overall, developers should evaluate these methods based on the specific context of their application and prioritize readability, maintainability, and performance according to their needs.

Related benchmarks:

Remove all children from DOM node 2 (version: 1)

Comparing performance of: Remove firstChild vs Remove lastChild vs innerHTML vs innerText vs textContent vs firstChild.remove vs range vs replaceChildren vs for of childNodes vs while childNodes

Created: 3 months ago by: Registered User

Jump to the latest result

Remove firstChild

Remove lastChild

innerHTML

innerText

textContent

firstChild.remove

range

replaceChildren

for of childNodes

while childNodes

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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