Benchmark: cloneNode vs DocumentFragment

Script Preparation code:

const tpl = document.createElement('template');
tpl.innerHTML = `
<div>
    <h1>Heading</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <button>Button</button>
</div>
`;
const el = tpl.content.firstElementChild

function createByCloneNode() {
    return el.cloneNode()
}

function createByDocumentFragment() {
    const fragment = document.createDocumentFragment();

    const el = document.createElement('div');
    const heading = document.createElement('h1');
    const para1 = document.createElement('p');
    const para2 = document.createElement('p');
    const button = document.createElement('button');

    heading.innerText = 'Heading';
    para1.innerText = 'Paragraph 1';
    para2.innerText = 'Paragraph 2';
    button.innerText = 'Button';

    el.appendChild(heading);
    el.appendChild(para1);
    el.appendChild(para2);
    el.appendChild(button);

    fragment.appendChild(el);
  
  	return fragment
}

Tests:

cloneNode
for (var i = 0; i < 1000; i++) { document.documentElement.appendChild(createByCloneNode()); }
DocumentFragment
for (var i = 0; i < 1000; i++) { document.documentElement.appendChild(createByDocumentFragment()); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
cloneNode
DocumentFragment

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 120 on Windows

View result in a separate tab

Test name	Executions per second
cloneNode	732.1 Ops/sec
DocumentFragment	119.9 Ops/sec

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

LLMs can make mistakes. Check important info.

**What is tested on the provided JSON?**

The provided JSON represents a benchmark test for two different approaches to create and append elements to the document body:

1. **cloneNode**: This approach uses the `cloneNode()` method of an HTML element to create a copy of the original element, which is then appended to the document body.
2. **DocumentFragment**: This approach uses a `DocumentFragment` object to group multiple elements together, which is then appended to the document body.

**Options compared:**

The benchmark compares the performance of these two approaches:

* cloneNode
* DocumentFragment

**Pros and Cons:**

* **cloneNode**:
	+ Pros: Simple and straightforward, easy to understand.
	+ Cons: Can be slow if cloning many elements, as it involves creating multiple DOM nodes.
* **DocumentFragment**:
	+ Pros: More efficient than `cloneNode`, as it only creates a single DOM node that contains all the appended elements. This can lead to better performance when appending many elements.
	+ Cons: Requires more code to create and manage the `DocumentFragment` object.

**Library and Purpose:**

The benchmark uses the following libraries:

* None explicitly mentioned, but it's likely that the `template` element is used by Chrome, which has some caching mechanisms for `template` elements. The `DocumentFragment` API is a native Web APIs.
 
 **Special JS feature or syntax:**

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

**Benchmark Preparation Code:**

The script preparation code creates an HTML template with a `<div>` element and some text content, and then extracts the first child element of the template's `content` property. This is used as a reusable function to create new elements for cloning or appending to the document body.

Individual test cases:

* **cloneNode**: Appends 1000 cloned copies of the extracted element to the document body.
* **DocumentFragment**: Appends 1000 instances of the `DocumentFragment` object, containing the extracted element, to the document body.

**Other alternatives:**

Other approaches could be used instead of `cloneNode` and `DocumentFragment`, such as:

* Using `createElement()` and appending elements directly to the document body.
* Using a library like jQuery or React to handle DOM manipulation.
* Using Web Workers to perform DOM manipulations in parallel.

Keep in mind that these alternatives would likely have different performance characteristics and might not be suitable for all use cases.

Related benchmarks:

cloneNode vs DocumentFragment (version: 0)

Comparing performance of: cloneNode vs DocumentFragment

Created: 5 years ago by: Registered User

Jump to the latest result

cloneNode

DocumentFragment

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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