Benchmark: clear html element children

HTML Preparation code:

<div id='x'></div>

Script Preparation code:

const root = document.getElementById('x');

for (let i = 0; i < 100; i++) {
	let notRoot = document.createElement('div')
    notRoot.innerHTML = `the rainbow eats sunlight under jupiter's moonlight ${Math.random()}`;
	root.appendChild(notRoot);
}

Tests:

innerHTML
const root = document.getElementById('x').cloneNode(true); root.innerHTML = '';
removeChild firstChild
const root = document.getElementById('x').cloneNode(true); while (root.firstChild) root.removeChild(root.firstChild);
removeChild lastChild
const root = document.getElementById('x').cloneNode(true); while (root.lastChild) root.removeChild(root.lastChild);
textContent
const root = document.getElementById('x').cloneNode(true); root.textContent = '';

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
innerHTML
removeChild firstChild
removeChild lastChild
textContent

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark.

**Benchmark Definition**

The benchmark is designed to test the performance of different methods for clearing HTML element children in JavaScript. The script preparation code creates an HTML element with 100 child elements, each containing a random string. The `innerHTML` property is set to an empty string using three different approaches:

1. `cloneNode(true)`: Creates a deep copy of the original element and sets its `innerHTML` to an empty string.
2. `removeChild` + `firstChild` or `lastChild`: Removes the first or last child element from the list, respectively.

**Options Compared**

The benchmark compares the performance of three different approaches:

1. **Clone Node**: Creates a deep copy of the original element and sets its `innerHTML` to an empty string.
2. **Remove Child First/Last**: Removes the first or last child element from the list using the `removeChild` method with either `firstChild` or `lastChild` as the argument.

**Pros and Cons**

1. **Clone Node**:
	* Pros: Efficient way to clear the children, no need to iterate through the elements.
	* Cons: Creates a new DOM node, which can lead to increased memory usage and garbage collection overhead.
2. **Remove Child First/Last**:
	* Pros: No memory allocation, simple iteration through elements.
	* Cons: Requires an extra operation to remove each child element, leading to slower performance.

**Library Used**

None, this benchmark is a basic test of JavaScript's DOM manipulation capabilities.

**Special JS Feature/Syntax**

There are no special features or syntax used in this benchmark. It only relies on standard JavaScript and DOM APIs.

**Other Considerations**

The benchmark measures the time taken for each approach to execute 100 times. The results show that `cloneNode(true)` is the fastest method, followed by `removeChild lastChild`, and then `removeChild firstChild`.

**Alternatives**

If you want to explore alternative approaches or libraries, consider the following options:

1. **Use a more efficient DOM manipulation library**, such as React or Vue.js, which provide optimized methods for manipulating the DOM.
2. **Implement a custom solution using Web Workers**, which can offload computationally intensive tasks and improve performance.
3. **Experiment with different browser engines** or versions to identify potential differences in performance.

Keep in mind that this benchmark is designed to illustrate basic concepts and may not reflect real-world scenarios. The actual performance differences between these approaches will depend on the specific use case, JavaScript version, and environment.

Latest run results:

Run details: (Test run date: 2 years ago)

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

Browser/OS: Chrome 104 on Windows

View result in a separate tab

Test name	Executions per second
innerHTML	10131.4 Ops/sec
removeChild firstChild	6893.2 Ops/sec
removeChild lastChild	6915.7 Ops/sec
textContent	11305.0 Ops/sec

Related benchmarks:

clear html element children (version: 1)

Comparing performance of: innerHTML vs removeChild firstChild vs removeChild lastChild vs textContent

Created: 4 years ago by: Registered User

Jump to the latest result

innerHTML

removeChild firstChild

removeChild lastChild

textContent

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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