Benchmark: Test remove node performance (with new nodes added)

HTML Preparation code:

<div id='test'></div>

Script Preparation code:

var el = document.getElementById('test');

Tests:

textContent
let node = document.getElementById('test'); for (let i = 0; i < 1000; ++i) el.appendChild(document.createElement('div')); node.textContent = '';
removeChild
let node = document.getElementById('test'); for (let i = 0; i < 1000; ++i) el.appendChild(document.createElement('div')); while(node.firstChild) { node.removeChild(node.firstChild); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
textContent
removeChild

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36

Browser/OS: Chrome 134 on Windows

View result in a separate tab

Test name	Executions per second
textContent	734.9 Ops/sec
removeChild	198.3 Ops/sec

Autogenerated LLM Summary (model gemma2:9b, generated one year ago):

LLMs can make mistakes. Check important info.

This benchmark tests two different methods for clearing the content of a HTML element:

**Method 1: `textContent = ''`**

* **Description:** This method sets the `textContent` property of an element to an empty string, effectively removing all child nodes and their content.

* **Pros:**  Generally considered more concise and potentially faster as it operates directly on the text content rather than manipulating individual nodes.
* **Cons:** Can be less efficient if the element contains a large number of nested elements or complex structure.

**Method 2: `while(node.firstChild) { node.removeChild(node.firstChild); }`**

* **Description:** This method uses a loop to iterate through all child nodes of the element and removes each child node individually using `removeChild`.
* **Pros:** More explicit in its actions, potentially more predictable for complex HTML structures, and avoids direct manipulation of text content. 
* **Cons:** Can be slower due to the repeated calls to `removeChild` which involve DOM updates and potentially more memory allocation/deallocation.

**Considerations:**

* **Complexity:** For simple cases with few child nodes, the difference in performance might be negligible.  However, as the number of nodes increases, the iterative removal approach (`while` loop) can become significantly slower.
* **Browser Optimizations:** Modern browsers often optimize `textContent` manipulation for performance. 
* **Alternatives:** In certain scenarios, using CSS to hide or display elements instead of removing them entirely might be more efficient, especially if visual presentation is the primary concern.

**Other Alternatives:**

While this benchmark focuses on clearing the content, other approaches exist depending on the context:

* **Clearing a specific type of node:** If you only need to remove a specific type of node (e.g., `div` elements), you could use a more targeted selection within the loop or utilize query selectors to filter nodes before removing them.
* **Using libraries:** Libraries like JQuery or React can offer optimized methods for manipulating DOM elements, potentially improving performance compared to manual manipulation.

The benchmark results show that in this particular case (`textContent` performs better), but it's essential to consider the specific context and complexity of your use case when choosing the most appropriate approach.

Related benchmarks:

Test remove node performance (with new nodes added) (version: 0)

I suspect .textContent = '' should be faster, why are benchmarks saying it isn't? It makes no sense. So let's try adding nodes to clean up?

Comparing performance of: textContent vs removeChild

Created: 2 years ago by: Guest

Jump to the latest result

textContent

removeChild

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gemma2:9b, generated one year ago):