Benchmark: frag vs append document

HTML Preparation code:


<div id='foo'></div>

Tests:

append child
const el = document.getElementById('foo'); for(let i = 0; i <= 1000; i++) { const div = document.createElement('div'); div.innerHTML = 'div'; el.appendChild(div); }
frag
const el = document.getElementById('foo'); const frag = document.createDocumentFragment(); for(let i = 0; i <= 1000; i++) { const div = document.createElement('div'); div.innerHTML = 'div'; frag.appendChild(div); } el.appendChild(frag.cloneNode(true));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
append child
frag

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 break down the provided benchmark and its test cases to understand what is being tested.

**Overview**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks. The provided JSON represents two test cases: "append child" and "frag". These test cases are designed to compare the performance of appending elements to an element using the `appendChild` method versus creating a `DocumentFragment` object.

**Test Case 1: "append child"**

This test case measures the time it takes to append 1000 elements to an element with the id "foo". The benchmark definition code is:

```javascript
for(let i = 0; i <= 1000; i++) {
  const div = document.createElement('div');
  div.innerHTML = 'div';
  el.appendChild(div);
}
```

This test case is measuring the overhead of calling `appendChild` repeatedly. It's likely that this benchmark is testing the browser's ability to handle repeated calls to `appendChild`, which can be a performance-intensive operation.

**Test Case 2: "frag"**

This test case measures the time it takes to append 1000 elements to an element using a `DocumentFragment`. The benchmark definition code is:

```javascript
for(let i = 0; i <= 1000; i++) {
  const div = document.createElement('div');
  div.innerHTML = 'div';
  frag.appendChild(div);
}
el.appendChild(frag.cloneNode(true));
```

This test case is measuring the overhead of creating a `DocumentFragment` object and appending elements to it. It then clones the fragment and appends it to the element. This is likely testing the browser's ability to create and manage `DocumentFragment` objects efficiently.

**Comparison**

The comparison between these two test cases highlights the benefits of using `DocumentFragment` objects for appending elements:

*   Using `appendChild` repeatedly can be slower than creating a `DocumentFragment` object and appending elements to it.
*   Creating and managing `DocumentFragment` objects is generally faster than calling `appendChild` repeatedly.

**Library**

In this benchmark, no specific libraries are mentioned. However, the use of the `document.createDocumentFragment()` method implies that the browser supports the `DocumentFragment` API.

**Special JS feature/syntax**

There are no special JavaScript features or syntax used in these test cases. They appear to be standard JavaScript code snippets designed to test performance.

**Other alternatives**

If you wanted to write a similar benchmark, you could explore other approaches, such as:

*   Using `insertAdjacentHTML()` instead of creating elements and appending them.
*   Using `renderList()` from the `@babel/preset-env` library to create and append elements in a more efficient manner.
*   Creating a custom `appendChild` function that uses `DocumentFragment` objects internally.

Keep in mind that the performance differences between these approaches may vary depending on the specific browser, JavaScript engine, and use case.

Related benchmarks:

frag vs append document (version: 0)

Comparing performance of: append child vs frag

Created: 5 years ago by: Guest

Jump to the latest result

append child

frag

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):