Benchmark: Remove all child nodes from parent node

HTML Preparation code:

<div id="test">
  <span></span>
  <p></p>
  <div></div>
  <span></span>
  <p></p>
  <div></div>
  <span></span>
  <p></p>
  <div></div>
  <span></span>
</div>

Script Preparation code:

var node = document.getElementById('test')

Tests:

Element.innerHTML
node.innerHTML = ''
Element.textContent
node.textContent = ''
while firstChild - lastChild
while(node.firstChild)node.removeChild(node.lastChild)
while lastChild - firstChild
while(node.lastChild)node.removeChild(node.firstChild)
while firstChild - firstChild
while(node.firstChild)node.removeChild(node.firstChild)
while lastChild - lastChild
while(node.lastChild)node.removeChild(node.lastChild)
Element.innerText
node.innerText = ''

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Element.innerHTML
Element.textContent
while firstChild - lastChild
while lastChild - firstChild
while firstChild - firstChild
while lastChild - lastChild
Element.innerText

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks!

**Benchmark Definition:**
The benchmark is designed to measure the performance of removing all child nodes from a parent node in HTML documents. The script preparation code creates an HTML document with multiple child elements, and the test cases execute different methods to remove these child nodes.

**Test Cases:**

1. `Element.innerHTML = ''`: Sets the innerHTML property of the parent element to an empty string, effectively removing all child nodes.
2. `Element.textContent = ''`: Sets the textContent property of the parent element to an empty string, which also removes all child nodes (since text nodes are considered part of the element's content).
3. `while(node.firstChild)node.removeChild(node.lastChild)` and its variations: These test cases use a loop to remove each child node individually using the `removeChild` method.
4. `Element.innerText = ''`: Sets the innerText property of the parent element to an empty string, which only removes text nodes (not other types of child elements like comments or script tags).

**Libraries and Special Features:**

* None mentioned in the provided benchmark definition.

**Options Compared:**
The test cases compare the performance of different methods for removing child nodes:

* Directly setting `innerHTML` to an empty string
* Setting `textContent` to an empty string
* Using a loop with `removeChild` on each child node
* Using a loop with `removeChild` in reverse order (last child to first)
* Using the `innerText` property

**Pros and Cons of Each Approach:**

1. **Directly setting `innerHTML` to an empty string**: Fastest, but may not be suitable for all cases (e.g., if the element has other attributes or content).
2. **Setting `textContent` to an empty string**: Similar performance to setting `innerHTML`, but may have additional benefits (e.g., preserving other attributes or content).
3. **Using a loop with `removeChild` on each child node**: More control over which nodes are removed, but slower due to the iteration.
4. **Using a loop with `removeChild` in reverse order**: May be faster than iterating from first to last child, as it avoids unnecessary iterations.

**Other Considerations:**

* The benchmark assumes that the parent element is a single HTML element (e.g., `div`, `span`, `p`). If the element has multiple nesting levels or complex structure, different approaches may be more suitable.
* The benchmark does not account for other factors like memory allocation, garbage collection, or rendering performance.

**Alternatives:**

If you want to test similar benchmarks or explore alternative methods for removing child nodes, consider:

1. Removing child nodes using `appendChild` and then clearing the element's content (e.g., with a regex).
2. Using a library like jQuery or vanilla JavaScript's `Array.prototype.forEach` to iterate over child nodes.
3. Testing different approaches on elements with varying structures or attributes (e.g., images, comments, script tags).

Keep in mind that these alternatives may require adjustments to the benchmark definition and test cases to ensure accurate comparisons.

Related benchmarks:

Remove all child nodes from parent node (version: 0)

Comparing performance of: Element.innerHTML vs Element.textContent vs while firstChild - lastChild vs while lastChild - firstChild vs while firstChild - firstChild vs while lastChild - lastChild vs Element.innerText

Created: 4 years ago by: Guest

Jump to the latest result

Element.innerHTML

Element.textContent

while firstChild - lastChild

while lastChild - firstChild

while firstChild - firstChild

while lastChild - lastChild

Element.innerText

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):