Benchmark: Clear Element content v4

HTML Preparation code:

<div id="container"></div>

Script Preparation code:

const container = document.querySelector('#container');
for (let i=0; i<300; i++) 
  container.appendChild(document.createElement('p'));

Tests:

innerHTML
container.innerHTML ='';
replaceChildren
container.replaceChildren()
remove firstChild
while (container.firstChild) container.removeChild(container.firstChild)
remove lastChild
while (container.lastChild) container.removeChild(container.lastChild)
textContent
container.textContent=''
remove and recreate root element
const clone = container.cloneNode(false); container.parentNode.replaceChild(clone, container);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
innerHTML
replaceChildren
remove firstChild
remove lastChild
textContent
remove and recreate root element

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

Browser/OS: Chrome 126 on Windows

View result in a separate tab

Test name	Executions per second
innerHTML	2066941.0 Ops/sec
replaceChildren	2109725.5 Ops/sec
remove firstChild	2936671.2 Ops/sec
remove lastChild	2941773.5 Ops/sec
textContent	1962089.1 Ops/sec
remove and recreate root element	188694.5 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Explanation**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks. The provided benchmark measures the performance of different methods for clearing content from an HTML element.

The test case starts by creating a container element with `document.querySelector('#container')`. It then appends 300 paragraph elements (`document.createElement('p')`) to the container, simulating a large amount of content.

The actual benchmarking code is divided into six test cases:

1. **innerHTML**: Sets the innerHTML property of the container element to an empty string.
2. **replaceChildren**: Replaces all child elements of the container with new ones using `container.replaceChildren()`.
3. **remove firstChild**: Removes all child elements from the container one by one using a while loop (`while (container.firstChild) ...`).
4. **remove lastChild**: Removes all child elements from the container one by one in reverse order using a while loop (`while (container.lastChild) ...`).
5. **textContent**: Sets the text content of the container element to an empty string.
6. **remove and recreate root element**: Replaces the entire container element with a new one created by cloning it (`const clone = container.cloneNode(false);`) and then replacing it in the DOM.

**Comparison of Methods**

The benchmark compares the performance of each method, which can be summarized as follows:

* **innerHTML**: Fastest method, but may have security implications if not used carefully.
	+ Pros: Fast, easy to implement.
	+ Cons: May cause XSS vulnerabilities if innerHTML is set to user-controlled input.
* **replaceChildren**: Slower than `innerHTML`, but more efficient than removing child elements one by one.
	+ Pros: Efficient, does not require iterating over child nodes.
	+ Cons: Requires more DOM operations than `innerHTML`.
* **remove firstChild** and **remove lastChild**: Slower than `replaceChildren`, as they require iterating over all child nodes.
	+ Pros: Avoids using `innerHTML` or `replaceChildren`, which can have security implications.
	+ Cons: More DOM operations, slower than `replaceChildren`.
* **textContent**: Fastest method among the three that modify text content.
	+ Pros: Fast, easy to implement.
	+ Cons: May not be suitable for elements with non-text child nodes.

**Library and Special JS Features**

The test case uses the `document` object, which is a part of the DOM (Document Object Model). The `cloneNode()` method used in one of the test cases is also a standard DOM method.

There are no special JavaScript features or syntax used in this benchmark that would be unfamiliar to most software engineers.

**Alternatives**

Other methods for clearing content from an HTML element might include:

* Using a CSS style property, such as `display: none` or `visibility: hidden`, to hide the content.
* Using a library like jQuery or React that provides efficient DOM manipulation methods.
* Using a web worker or other parallel execution mechanism to perform the clearing operation in the background.

However, these alternatives might not be suitable for all use cases and may require additional considerations, such as performance overhead or compatibility issues.

Related benchmarks:

Clear Element content v4 (version: 5)

Howto clear Element Content

Comparing performance of: innerHTML vs replaceChildren vs remove firstChild vs remove lastChild vs textContent vs remove and recreate root element

Created: 4 years ago by: Registered User

Jump to the latest result

innerHTML

replaceChildren

remove firstChild

remove lastChild

textContent

remove and recreate root element

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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