Benchmark: Empty Children - MeasureThat.net

HTML Preparation code:

<div id='container' />

Script Preparation code:

const items = document.createDocumentFragment();
for (let i = 0; i <= 3000; i++) {
    items.appendChild(document.createElement("div"));
}
const container = document.getElementById("container");
container.appendChild(items);

Tests:

innerHTML
container.innerHTML = "";
textContent
container.textContent = "";

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
innerHTML
textContent

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark definition and test cases to understand what's being tested.

**Benchmark Definition**

The benchmark definition is a JSON object that represents a JavaScript microbenchmark. It consists of three main parts:

1. **Script Preparation Code**: This section contains the JavaScript code that prepares the environment for the benchmark. In this case, it creates an HTML document fragment (`const items = document.createDocumentFragment();`) and appends 3000 `div` elements to it using a `for` loop. The resulting fragment is then appended to a container element with the id "container".
2. **Html Preparation Code**: This section contains the HTML code that sets up the initial state of the benchmark. In this case, it creates an empty `div` element with the id "container" and appends it to the body of the HTML document.
3. **Benchmark Definition**: This section defines the actual benchmark being tested. In this case, there are two tests:
	* `innerHTML`: The script clears the innerHTML of the container element using `container.innerHTML = "";`.
	* `textContent`: The script clears the text content of the container element using `container.textContent = "";`.

**Options Compared**

The two options being compared in this benchmark are:

1. **`innerHTML`**: This option uses the `innerHTML` property to set the inner HTML of the container element.
2. **`textContent`**: This option uses the `textContent` property to set the text content of the container element.

**Pros and Cons**

Here's a brief summary of the pros and cons of each option:

1. **`innerHTML`**:
	* Pros: More flexible, allows for setting HTML elements and attributes.
	* Cons: Can be slower due to the overhead of parsing HTML strings.
2. **`textContent`**:
	* Pros: Faster, as it only sets the text content without parsing any additional HTML tags.
	* Cons: Less flexible, only works with plain text.

In general, `innerHTML` is often used when working with complex HTML structures or when setting multiple attributes at once. On the other hand, `textContent` is a better choice when working with plain text only and performance is a concern.

**Library**

The benchmark uses the `document.createDocumentFragment()` method to create an empty document fragment, which allows it to append child elements without creating new DOM nodes.

**Special JS Feature/Syntax**

There doesn't appear to be any special JavaScript features or syntax being used in this benchmark. The code is written in standard JavaScript and relies on the built-in DOM API.

**Other Alternatives**

If you wanted to run a similar benchmark, you could modify the script preparation code to use different approaches, such as:

* Using `outerHTML` instead of `innerHTML`
* Creating a temporary text node using `document.createTextNode()` instead of clearing the container's text content
* Using a library like jQuery or React to manipulate the DOM

Keep in mind that each alternative would likely have its own set of pros and cons, depending on the specific use case and requirements.

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:90.0) Gecko/20100101 Firefox/90.0

Browser/OS: Firefox 90 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
innerHTML	1281501.4 Ops/sec
textContent	1283738.8 Ops/sec

Related benchmarks:

Empty Children (version: 0)

Comparing performance of: innerHTML vs textContent

Created: 3 years ago by: Registered User

Jump to the latest result

innerHTML

textContent

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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