Benchmark: innerhtml vs removechild vs remove vs innerText vs textContent vs replaceChildren (100)

HTML Preparation code:

<div id="container"></div>

Script Preparation code:

var node = document.getElementById('container');

for(var i = 0; i < 100; i++) node.appendChild(document.createElement('div'));

Tests:

innerHTML
var node = document.getElementById('container'); node.innerHTML = '';
removeChild
var node = document.getElementById('container'); while(node.firstChild) node.removeChild(node.firstChild)
remove
var node = document.getElementById('container'); while(node.firstChild) node.firstChild.remove()
innerText
var node = document.getElementById('container'); node.innerText = '';
textContent
var node = document.getElementById('container'); node.textContent = '';
replaceChildren
var node = document.getElementById('container'); node.replaceChildren()

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
innerHTML
removeChild
remove
innerText
textContent
replaceChildren

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36

Browser/OS: Chrome 129 on Linux

View result in a separate tab

Test name	Executions per second
innerHTML	2836759.8 Ops/sec
removeChild	4971886.0 Ops/sec
remove	4976255.5 Ops/sec
innerText	3639106.5 Ops/sec
textContent	2721220.0 Ops/sec
replaceChildren	2762901.0 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one month ago):

LLMs can make mistakes. Check important info.

The benchmark defined in the provided JSON compares different methods of manipulating the DOM (Document Object Model) in JavaScript, specifically for clearing out child elements from a container nodes.

### Options Tested

1. **innerHTML**:
   - Definition: `node.innerHTML = '';`
   - This method sets the HTML content of the node to an empty string, effectively removing all child nodes.
   - **Pros**: Very straightforward and quick for resetting an element’s contents.
   - **Cons**: Can lead to performance issues if used excessively, as it parses the HTML string which can also invalidate references to existing child nodes.

2. **removeChild**:
   - Definition: `while(node.firstChild) node.removeChild(node.firstChild);`
   - This method removes child nodes one by one using a loop until no child remains.
   - **Pros**: It is precise and only targets children, preserving the node itself.
   - **Cons**: Can be slower than other methods because it requires a call for each child node.

3. **remove**:
   - Definition: `while(node.firstChild) node.firstChild.remove();`
   - This method calls the `remove()` method on each first child in a loop until the node is empty.
   - **Pros**: Similar to `removeChild`, but potentially cleaner to read, and `remove()` directly acts on the nodes.
   - **Cons**: Also incurs the overhead of multiple function calls.

4. **innerText**:
   - Definition: `node.innerText = '';`
   - This method is similar to `innerHTML`, but it specifically manipulates text content.
   - **Pros**: Respects the visual display of text; hides child elements while clearing.
   - **Cons**: Performance can degrade for large amounts of text, similar to `innerHTML`.

5. **textContent**:
   - Definition: `node.textContent = '';`
   - This method sets the textual content of the node, removing all text and child elements.
   - **Pros**: Faster than `innerHTML` and more secure as it does not parse HTML.
   - **Cons**: Like `innerText`, it may not behave well with styled or hidden elements.

6. **replaceChildren**:
   - Definition: `node.replaceChildren();`
   - This method replaces all the child nodes of the specified node with a new set of nodes.
   - **Pros**: Potentially more efficient for adding/removing children in one call. It effectively resets the children without needing to iterate.
   - **Cons**: Might not be supported in older browsers, limiting its use in certain environments.

### Performance Summary of Results

From the benchmark results:
- The fastest method was `remove`, achieving around 4.98 million executions per second.
- `removeChild` was also quite fast, just slightly slower.
- The methods `innerText` and `innerHTML` performed significantly slower, while `textContent` and `replaceChildren` were the slowest in this particular benchmark.

### Other Considerations

- **Browser Compatibility**: When choosing a method, consider compatibility across various browsers and how they handle DOM manipulation. For instance, `replaceChildren` is not supported in older versions of Internet Explorer.
- **Complexity of Content**: The choice may vary based on whether the content contains complex HTML elements or just plain text. For instance, using `innerHTML` can introduce security risks (e.g., XSS attacks) if any user-generated content is involved.
- **Readability and Maintainability**: Clean code is essential, and some methods might be fresher and easier to read for team members or future engineers.

### Alternative Approaches

- Utilizing libraries like **jQuery** can simplify DOM manipulation, although jQuery is less common in modern development due to advancements in vanilla JavaScript.
- Frameworks like **React** or **Vue** utilize virtual DOM techniques which optimize updates and manipulations, making manual DOM manipulations less necessary.
- If dealing with iterating large numbers of nodes, consider deferred handling (e.g., using `DocumentFragment`) to minimize layout recalculations.

This benchmark demonstrates the performance differences in how various common DOM manipulation methods operate, allowing developers to choose the most suitable technique based on their specific use case.

Related benchmarks:

innerhtml vs removechild vs remove vs innerText vs textContent vs replaceChildren (100) (version: 0)

Comparing performance of: innerHTML vs removeChild vs remove vs innerText vs textContent vs replaceChildren

Created: one month ago by: Guest

Jump to the latest result

innerHTML

removeChild

remove

innerText

textContent

replaceChildren

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one month ago):