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

Autogenerated LLM Summary (model llama3.1:latest, generated one month ago):

LLMs can make mistakes. Check important info.

Let's break down the benchmark definition and the test cases.

**Benchmark Definition**

The benchmark is called "Test remove node performance (with new nodes added)" with a description suggesting that it's testing whether setting `textContent` to an empty string is faster than removing child nodes using `removeChild`.

**Script Preparation Code**

This code sets up a DOM element with the ID "test" in the HTML preparation code.

**Html Preparation Code**

A simple HTML snippet creates a `<div>` element with the ID "test".

**Individual Test Cases**

There are two test cases:

1. **textContent**
	* This test case creates a node (an element) using `document.getElementById('test')`.
	* It then appends 1000 new `<div>` elements to the existing node.
	* Finally, it sets the `textContent` property of the original node to an empty string (`''`).
2. **removeChild**
	* This test case is similar to the first one: it creates a node and appends 1000 new `<div>` elements.
	* However, instead of setting `textContent`, it uses a while loop to remove all child nodes from the original node using `removeChild`.

**Latest Benchmark Result**

The results show two browsers (Chrome 118) running both test cases. The numbers indicate how many times each test case can execute per second:

1. **textContent**: approximately 519 executions per second
2. **removeChild**: approximately 436 executions per second

Now, let's discuss the options being compared and their pros/cons.

**Comparing Options**

The benchmark is testing two approaches to removing nodes:

1. **Setting `textContent` to an empty string (`''`)**:
	* Pros: simple, concise code
	* Cons: may not work as expected if child nodes contain formatting or layout information (e.g., spacing, padding)
2. **Using a while loop with `removeChild`**:
	* Pros: more reliable for removing all child nodes and maintaining their layout/spacing
	* Cons: slightly longer code and potentially slower performance due to the additional loop

Other considerations:

* The benchmark is testing both methods on a specific scenario (adding 1000 new nodes before removing them).
* The results suggest that setting `textContent` might be faster, but only by about 15% in this particular case.

**Library/Feature Usage**

No external libraries or special JavaScript features are used in this benchmark.

**Alternatives**

Other alternatives for removing child nodes include:

1. **Using `innerHTML`**: This method can replace all child nodes with a new string of HTML, which might be faster than individual node removals.
2. **Utilizing `querySelectorAll` and `removeChild`**: If you need to remove specific types of nodes (e.g., elements with a certain class), this approach can be more efficient.

Keep in mind that the best approach depends on your specific use case and performance requirements.

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/118.0.0.0 Safari/537.36 Edg/118.0.2088.46

Browser/OS: Chrome 118 on Windows

View result in a separate tab

Test name	Executions per second
textContent	519.0 Ops/sec
removeChild	436.3 Ops/sec

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: one year ago by: Guest

Jump to the latest result

textContent

removeChild

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.1:latest, generated one month ago):