Benchmark: Remove all children from DOM node

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();
childNodes
let list = document.getElementById("messages"); for (const node of [...list.childNodes]) { node.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
childNodes

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:135.0) Gecko/20100101 Firefox/135.0

Browser/OS: Firefox 135 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
Remove firstChild	7894005.0 Ops/sec
Remove lastChild	7751482.0 Ops/sec
innerHTML	5922110.0 Ops/sec
innerText	4953555.0 Ops/sec
textContent	5791779.5 Ops/sec
firstChild.remove	7842820.0 Ops/sec
range	2330245.2 Ops/sec
replaceChildren	3531303.5 Ops/sec
childNodes	6304519.5 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark described is focused on measuring the performance of different methods for removing all children from a DOM node in JavaScript. The target node is designated by the `id` "messages", and during preparation, it is filled with 1000 `<span>` elements containing the text "Text". This setup allows for a meaningful test of various DOM manipulation techniques and their efficiencies.

### Test Cases and Comparisons

1. **Remove firstChild**
   ```javascript
   while (list.firstChild) {
       list.removeChild(list.firstChild);
   }
   ```
   - **Pros:** This method is straightforward; it continuously removes the first child until there are none left.
   - **Cons:** Each call to `removeChild()` can be less efficient when handling a large number of elements, as it reflows the layout with each operation.

2. **Remove lastChild**
   ```javascript
   while (list.firstChild) {
       list.removeChild(list.firstChild);
   }
   ```
   - **Note:** This is actually a duplicate of the first test case but intended to use `list.removeChild(list.lastChild);`, which theoretically should perform better (details discussed below).
   - **Pros:** Similar to removing the first child but may have minor performance differences based on how the browser optimizes DOM operations.
   - **Cons:** Same as the first method; each removal forces rendering updates.

3. **innerHTML**
   ```javascript
   document.getElementById("messages").innerHTML = "";
   ```
   - **Pros:** Very fast because it completely replaces the inner HTML of the element in one go, causing minimal overhead.
   - **Cons:** This method can be risky as it removes all event listeners attached to the child elements; if any scripts rely on those event listeners, they must be reattached.

4. **innerText**
   ```javascript
   document.getElementById("messages").innerText = "";
   ```
   - **Pros:** Similar to `innerHTML`, it clears the content quickly, preserving more complex structures if used properly.
   - **Cons:** While less destructive than `innerHTML`, it may not work consistently across all browsers when handling non-text nodes.

5. **textContent**
   ```javascript
   document.getElementById("messages").textContent = "";
   ```
   - **Pros:** Like `innerHTML`, it's fast and straightforward but more semantically appropriate when dealing with text content.
   - **Cons:** Similar to `innerText`, it can lead to loss of events tied to child nodes.

6. **firstChild.remove**
   ```javascript
   while (list.firstChild) {
       list.firstChild.remove();
   }
   ```
   - **Pros:** Using the `remove()` method is a more modern approach and is easier to read.
   - **Cons:** It operates similarly to removeChild, potentially leading to performance issues due to multiple reflows.

7. **Range**
   ```javascript
   var range = new Range();
   range.selectNodeContents(document.getElementById("messages"));
   range.deleteContents();
   ```
   - **Pros:** This method can be considered powerful for bulk deletions, particularly useful when dealing with fragments of the DOM.
   - **Cons:** More complex and may come with overhead. Also, it's less commonly used, which could affect maintainability.

8. **replaceChildren**
   ```javascript
   let list = document.getElementById("messages");
   list.replaceChildren();
   ```
   - **Pros:** Designed explicitly for replacing all children, making it a very concise and efficient alternative for clearing a node’s children.
   - **Cons:** Relatively new (part of the DOM Living Standard) and may not be supported in older browsers.

9. **childNodes**
   ```javascript
   for (const node of [...list.childNodes]) {
       node.remove();
   }
   ```
   - **Pros:** Performance might be improved as it decomposes the NodeList into an array for easy iteration and removal.
   - **Cons:** The creation of an array may add slight overhead; still reliant on individual node removals.

### Performance Results Summary

The benchmark results measure `ExecutionsPerSecond` for each method, indicating how many times each method could execute in one second. Preliminary observations indicate:

- Methods that employ innerHTML (`innerHTML`, `textContent`, `innerText`) demonstrate significantly faster performance compared to node manipulation methods (like `removeChild` variations or using `remove()`).
- `range.deleteContents()` shows the lowest performance metrics, suggesting that while it's a more advanced method, it does not perform as optimally for this particular task.

### Considerations and Alternatives

While these methods are effective for clearing nodes, alternatives may include:

- **Virtual DOM frameworks**: Libraries like React and Vue automatically handle DOM updates more efficiently by leveraging virtual DOM techniques.
- **Batch updates**: Utilizing batching methods (like using `requestAnimationFrame` for visual updates) could optimize performance in broader applications, especially when coupled with dynamic content manipulation.

In conclusion, while the best method will depend on specific use cases (like performance needs, compatibility, and code clarity), the trade-offs between raw efficiency and structural integrity of the DOM should always be considered during selection.

Related benchmarks:

Remove all children from DOM node (version: 2)

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

Created: 3 months ago by: Registered User

Jump to the latest result

Remove firstChild

Remove lastChild

innerHTML

innerText

textContent

firstChild.remove

range

replaceChildren

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