Benchmark: Clone node vs create element frag

HTML Preparation code:


<div id='t'></div>

Script Preparation code:

function createExample() {
  return document.createElement('div');
}

Tests:

Clone node
let fragment = document.createDocumentFragment(); const cloneDiv = createExample(); for(let i = 0; i < 100; ++i) { fragment.appendChild(cloneDiv.cloneNode(false)); } document.getElementById('t').appendChild(fragment);
Create element
let fragment = document.createDocumentFragment(); for(let i = 0; i < 100; ++i) { fragment.appendChild(createExample()); } document.getElementById('t').appendChild(fragment);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Clone node
Create element

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 85 on Windows

View result in a separate tab

Test name	Executions per second
Clone node	5892.7 Ops/sec
Create element	4527.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark definition and test cases.

**Benchmark Definition**

MeasureThat.net is comparing two approaches to clone an HTML element:

1. **Clone node**: Cloning an existing DOM element using `cloneNode()` method.
2. **Create element frag**: Creating a new `DocumentFragment` object and appending cloned elements to it, then appending the fragment to the DOM.

**Script Preparation Code**

The script preparation code defines a function `createExample()` that returns a new HTML `div` element:
```javascript
function createExample() {
  return document.createElement('div');
}
```
This function is used in both test cases to create new elements for cloning or appending to the fragment.

**Html Preparation Code**

The HTML preparation code creates an empty `div` element with ID "t" and assigns it to a variable:
```javascript
<div id='t'></div>
```
This HTML element will be used as a target for appending cloned or created elements.

**Individual Test Cases**

There are two test cases:

1. **Clone node**: This test case clones the `createExample()` function 100 times and appends each clone to the `DocumentFragment` object, then appends the fragment to the DOM.
```javascript
let fragment = document.createDocumentFragment();
const cloneDiv = createExample();
for (let i = 0; i < 100; ++i) {
  fragment.appendChild(cloneDiv.cloneNode(false));
}
document.getElementById('t').appendChild(fragment);
```
2. **Create element**: This test case creates 100 new `div` elements using the `createExample()` function and appends each one to the `DocumentFragment` object, then appends the fragment to the DOM.
```javascript
let fragment = document.createDocumentFragment();
for (let i = 0; i < 100; ++i) {
  fragment.appendChild(createExample());
}
document.getElementById('t').appendChild(fragment);
```
**Pros and Cons**

Both approaches have their advantages:

* **Clone node**: This approach is more efficient because it doesn't create new elements, only clones existing ones. However, it may require more memory if the cloned elements are large or complex.
* **Create element frag**: This approach creates a new `DocumentFragment` object and appends cloned elements to it, then appends the fragment to the DOM. This approach is simpler and doesn't require cloning individual elements, but it may create unnecessary objects in memory.

**Other Considerations**

The benchmark measures the execution time of each test case, which can help determine which approach is faster for specific use cases. Additionally, the benchmark uses a `DocumentFragment` object to reduce the number of DOM mutations, which can improve performance by avoiding unnecessary reflows and repaints.

**Library: DocumentFragment**

A `DocumentFragment` object is a lightweight container that allows you to group multiple elements together without creating a new element in the DOM. It's used to reduce the number of DOM mutations when appending elements to the DOM.

**Special JS Feature: None mentioned**

There are no special JavaScript features or syntax used in this benchmark definition.

Related benchmarks:

Clone node vs create element frag (version: 2)

Compare cloning element vs creating a new one

Comparing performance of: Clone node vs Create element

Created: 4 years ago by: Registered User

Jump to the latest result

Clone node

Create element

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