Benchmark: createContextualFragment vs appendChild

HTML Preparation code:

<div id="target"></div>

Script Preparation code:

const makeClassed = (tag) => (className, textContent) => {
  const el = document.createElement(tag);
  el.classList.add(className);
  if (textContent !== undefined) {
    el.textContent = textContent;
  }
  return el;
};

const makeSpan = makeClassed("span");
var makeDiv = makeClassed("div");

var target = document.getElementById("target")
var group = {
  number: 42
}

Tests:

createContextualFragment
const fragment = document.createRange().createContextualFragment(` <div class="group-before">Группа ${group.number}</div> <div class="group-toggle">-</div> <div class="rows-container"></div> `); const toggle = fragment.querySelector('.group-toggle'); const rows = fragment.querySelector('.rows-container'); target.appendChild(fragment);
appendChild
const groupBefore = makeDiv('group-before', `Группа ${group.number}`); const groupToggle = makeDiv('group-toggle', '-'); const rows = makeDiv('rows-container'); target.appendChild(groupBefore); target.appendChild(groupToggle); target.appendChild(rows);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
createContextualFragment
appendChild

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.

**Overview**

The provided benchmark is designed to compare the performance of two approaches: creating a DOM fragment using `document.createRange().createContextualFragment()` and appending elements individually using `appendChild()`. The benchmark uses JavaScript and the Document Object Model (DOM) of the web.

**What's being tested?**

In the first test case, `createContextualFragment`, a DOM fragment is created using the `document.createRange().createContextualFragment()` method. This method allows creating a new DOM node that includes all elements from the specified range, while excluding the elements outside that range. In this benchmark, a group of elements is created within the fragment and then appended to the target element.

In the second test case, `appendChild`, individual elements are created using JavaScript functions (`makeClassed`) and then appended one by one to the target element.

**Options compared**

The two approaches have different pros and cons:

1. **`document.createRange().createContextualFragment()`**:
	* Pros:
		+ Can create a new DOM node with all elements from the specified range, reducing the number of DOM mutations.
		+ May be more efficient for larger datasets or complex DOM structures.
	* Cons:
		+ Can be slower due to the creation of a new DOM node and the range object.
		+ Requires careful selection of the start and end points of the range.
2. **`appendChild()`**:
	+ Pros:
		- Simple and straightforward approach.
		- Easy to understand and maintain.
	+ Cons:
		- Can lead to slower performance due to multiple DOM mutations (insertion, deletion, and updating).
		- May require more JavaScript code and manipulation of the DOM.

**Other considerations**

When choosing between these approaches, consider the following factors:

* **DOM size**: If you're working with a large number of elements or complex DOM structures, creating a contextual fragment might be more efficient.
* **Performance requirements**: If speed is critical, `appendChild()` might be sufficient, but may require additional optimization techniques (e.g., batch updates).
* **Code complexity and maintainability**: For simpler use cases, `appendChild()` is often easier to understand and maintain.

**Library usage**

The benchmark uses the `document` object and its methods (`createRange()`, `createContextualFragment()`, and `appendChild()`). There are no external libraries or frameworks used in this benchmark.

**Special JavaScript features or syntax**

There are no special JavaScript features or syntax used in these benchmarks. The focus is on comparing two basic DOM manipulation techniques.

**Alternatives**

Other alternatives for creating DOM nodes and managing the Document Object Model include:

1. **`innerHTML`**: Using `innerHTML` to set the content of an element can be faster than creating individual elements, but it may not provide the same level of control over the DOM structure.
2. **`createElement()` and chain methods**: Creating elements using `createElement()` and chaining methods (e.g., `appendChild()`) can be a simple and effective approach for small to medium-sized datasets.

However, these alternatives might not offer the same performance benefits as creating a contextual fragment or using batch updates with `appendChild()`.

Related benchmarks:

createContextualFragment vs appendChild (version: 0)

Comparing performance of: createContextualFragment vs appendChild

Created: 2 years ago by: Guest

Jump to the latest result

createContextualFragment

appendChild

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