Benchmark: replace content - MeasureThat.net

HTML Preparation code:

<div id="container1"></div>
<div id="container2"></div>

Script Preparation code:

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

Tests:

replaceChildren
container1.replaceChildren(...container2.children);
remove and insert
while (container1.firstChild) container1.removeChild(container1.firstChild); while (container2.firstChild) container1.appendChild(container2.firstChild);
remove and replace
while (container1.firstChild) container1.removeChild(container1.firstChild); container1.replaceChildren(...container2.children);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
replaceChildren
remove and insert
remove and replace

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/109.0.0.0 Safari/537.36

Browser/OS: Chrome 109 on Windows

View result in a separate tab

Test name	Executions per second
replaceChildren	480284.0 Ops/sec
remove and insert	681723.9 Ops/sec
remove and replace	362125.1 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The provided JSON represents a JavaScript microbenchmarking test, where users can compare the performance of different approaches to clear element content on HTML elements. The benchmark consists of three individual test cases: "replaceChildren", "remove and insert", and "remove  and replace".

**Options Compared in the Benchmark**

In this benchmark, three options are compared:

1. **`container1.replaceChildren(...container2.children)`**: This method replaces the child nodes of `container1` with the child nodes of `container2`.
2. **While loops: `while (container1.firstChild) container1.removeChild(container1.firstChild);`** and **`while (container2.firstChild) container1.appendChild(container2.firstChild);`** (Test case "remove and insert"): These while loops remove child nodes from `container1` and then append them to `container1`.
3. **While loop: `while (container1.firstChild) container1.removeChild(container1.firstChild);`** followed by `container1.replaceChildren(...container2.children)` (Test case "remove  and replace"): This approach first removes all child nodes from `container1` using a while loop, and then replaces the content of `container1` with the child nodes of `container2`.

**Pros and Cons of Each Approach**

* **`replaceChildren`**: Pros:
	+ Most efficient method as it only requires a single call to replace child nodes.
	+ Can be faster than removing and re-appending elements, especially for large datasets.
*   Cons: May not work correctly if the child nodes have different types or are not DOM nodes.
*   **While loops (Test case "remove and insert")**: Pros:
	+ Works for any type of child node.
	+ Can be more straightforward to implement than `replaceChildren`.
*   Cons: Requires two while loops, which can be slower than a single call to `replaceChildren`.
*   **While loop followed by `replaceChildren` (Test case "remove  and replace")**: Pros:
	+ May be faster for large datasets due to the removal of all child nodes before replacement.
*   Cons: Requires an additional while loop, which can add complexity and slow down performance.

**Library Used**

None of the test cases explicitly use a library. However, `document.querySelector` is used to select DOM elements, which is a standard JavaScript API.

**Special JS Feature or Syntax**

The benchmark does not require any special JavaScript features or syntax beyond basic DOM manipulation and while loops.

**Other Alternatives**

For clearing element content, other methods can be used:

* Using the `innerHTML` property: `container1.innerHTML = container2.innerHTML;`
* Using a library like jQuery (although this is generally discouraged due to its size and dependencies)
* Using a custom implementation with a for loop or Array.prototype.forEach()

These alternatives may have different performance characteristics compared to the methods tested in this benchmark.

Related benchmarks:

replace content (version: 1)

Howto clear Element Content

Comparing performance of: replaceChildren vs remove and insert vs remove and replace

Created: 3 years ago by: Registered User

Jump to the latest result

replaceChildren

remove and insert

remove and replace

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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