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 content within a HTML element:

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

*  This approach directly sets the text content of the element to an empty string, effectively removing all existing text nodes.
* **Pros:** Conciseness and potential for better performance due to direct manipulation of the DOM tree.
* **Cons:** Performance can vary depending on the browser implementation and the number of child elements within the target node.

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

* This approach iteratively removes each child element of the target node until there are no more children.
* **Pros:** Explicit control over the removal process, potentially useful for scenarios where you need to handle removed elements individually.
* **Cons:**  Can be slower than `textContent = ''` due to the iterative nature of removing each child element.

**Considerations:**

* **Number of child elements:** For a large number of child elements, `textContent = ''` is generally faster due to its direct manipulation approach.

* **Browser implementation:** Browser implementations can differ in their performance optimizations for DOM operations.

**Other alternatives:**

* **Using innerHTML**: While not directly compared in this benchmark, setting the `innerHTML` property can also clear content. However, it's often slower than `textContent = ''` and can lead to unexpected behavior due to its HTML parsing capabilities.
* **Creating a new element**: This involves creating a new empty element and replacing the existing one. It's generally not recommended unless you need to completely recreate the structure of the content.

Let me know if you have any other questions!

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