Benchmark: createContextualFragment vs innerHMTL - w/ Dom Destroy and Replace

createContextualFragment vs innerHMTL - w/ Dom Destroy and Replace (version: 4)

Test speed of createContextualFragment append nodes vs replacing innerHTML.

Comparing performance of: innerHTML vs createContextualFragment - replaceChildren vs createContextualFragment - replace whole div vs cloneNode(true) - replace whole div vs cloneNode(true) - clear with innerHTML vs createContextualFragment - clear with innerHTML

Created: one month ago by: Registered User

Jump to the latest result

HTML Preparation code:

<html>
  <body>
    <div id="container">
    </div>
    <body>
  <html>

Script Preparation code:

var str = `<div>${Math.random().toString().slice(2)}</div>`;
var container = document.getElementById("container");
var res = '';
var temp = document.createElement('template')
for(i=0; i<30000; i++){
	res += str
}
temp.innerHTML = res;

var div = document.createElement('div')
container.appendChild(div);
div.innerHTML = res;

Tests:

innerHTML
div.innerHTML = res;
createContextualFragment - replaceChildren
const template = document.createRange().createContextualFragment(res); div.replaceChildren(template);
createContextualFragment - replace whole div
const newDiv = div.cloneNode(false); const template = document.createRange().createContextualFragment(res); newDiv.appendChild(template); div.parentNode.replaceChild(newDiv, div); div = newDiv;
cloneNode(true) - replace whole div
const newDiv = div.cloneNode(false); newDiv.append(temp.content.cloneNode(true)); div.parentNode.replaceChild(newDiv, div); div = newDiv;
cloneNode(true) - clear with innerHTML
div.innerHTML = ""; div.append(temp.content.cloneNode(true));
createContextualFragment - clear with innerHTML
div.innerHTML = ""; const template = document.createRange().createContextualFragment(res); div.appendChild(template);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
innerHTML
createContextualFragment - replaceChildren
createContextualFragment - replace whole div
cloneNode(true) - replace whole div
cloneNode(true) - clear with innerHTML
createContextualFragment - clear with innerHTML

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month ago)

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

Browser/OS: Chrome 108 on Windows

View result in a separate tab

Test name	Executions per second
RDFYjolf	1.0 Ops/sec
RDFYjolf	1.0 Ops/sec
RDFYjolf	1.0 Ops/sec
RDFYjolf	1.0 Ops/sec
RDFYjolf	1.0 Ops/sec
RDFYjolf	1.0 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one month ago):

LLMs can make mistakes. Check important info.

The benchmark provided is designed to assess the performance of various methods for manipulating the DOM, particularly in terms of appending and replacing nodes in the browser. The primary comparison made is between using `innerHTML` and `createContextualFragment` with additional options for how the DOM elements are manipulated.

### Options Compared

1. **Using `innerHTML`**
   - **Benchmark Definition:** `div.innerHTML = res;`
   - **Test Name:** `innerHTML`
   - **Pros:** 
     - Simple and straightforward method for setting or altering HTML content.
     - Requires minimal code to achieve the desired changes.
   - **Cons:** 
     - The complete re-parsing of HTML content can lead to performance issues, especially for larger chunks of HTML.
     - Replacing elements using `innerHTML` can cause loss of event handlers attached to the elements being replaced.

2. **Using `createContextualFragment` with `replaceChildren`**
   - **Benchmark Definition:** `const template = document.createRange().createContextualFragment(res); div.replaceChildren(template);`
   - **Test Name:** `createContextualFragment - replaceChildren`
   - **Pros:** 
     - Efficient way to parse and insert HTML as it creates a document fragment.
     - Preserves existing event listeners on sibling elements.
   - **Cons:** 
     - Slightly more complex syntax than using `innerHTML`.

3. **Using `createContextualFragment` with whole div replacement**
   - **Benchmark Definition:** `const newDiv = div.cloneNode(false); const template = document.createRange().createContextualFragment(res); newDiv.appendChild(template); div.parentNode.replaceChild(newDiv, div); div = newDiv;`
   - **Test Name:** `createContextualFragment - replace whole div`
   - **Pros:** 
     - Provides a more controlled replacement of elements, which can be advantageous for certain use cases.
   - **Cons:** 
     - More verbose and involves cloning the node, which can be a bit more complex and resource-intensive.

4. **Using `cloneNode` with `append`**
   - **Benchmark Definition:** `const newDiv = div.cloneNode(false); newDiv.append(temp.content.cloneNode(true)); div.parentNode.replaceChild(newDiv, div); div = newDiv;`
   - **Test Name:** `cloneNode(true) - replace whole div`
   - **Pros:** 
     - Allows for a clean slate as a new div is created, and content is appended without disrupting existing elements.
   - **Cons:** 
     - Requires more memory due to the cloning process and may be slower than alternative methods in certain cases.

5. **Using `cloneNode` with clear**
   - **Benchmark Definition:** `div.innerHTML = ""; div.append(temp.content.cloneNode(true));`
   - **Test Name:** `cloneNode(true) - clear with innerHTML`
   - **Pros:**
     - Combines the simplicity of `innerHTML` for clearing the content while taking advantage of `cloneNode` for adding new content.
   - **Cons:** 
     - Inherits the disadvantages of `innerHTML` regarding the loss of even listeners.

6. **Using `createContextualFragment` with clear**
   - **Benchmark Definition:** `div.innerHTML = ""; const template = document.createRange().createContextualFragment(res); div.appendChild(template);`
   - **Test Name:** `createContextualFragment - clear with innerHTML`
   - **Pros:** 
     - Retains the benefits of `createContextualFragment`, while initially clearing the element.
   - **Cons:** 
     - Still involves the performance hits associated with `innerHTML` for element clearing.

### Summary of Results
According to the benchmark results, the fastest method was `cloneNode(true) - replace whole div`, which executed at approximately 110.54 executions per second, followed by the `innerHTML` method at approximately 56.97 executions per second. The slower methods included various implementations of `createContextualFragment`, which suggests that while they offer advantages in managing DOM integrity and event handling, they can sometimes be less performant than simpler methods.

### Alternative Approaches
Other alternatives to DOM manipulation could include using:

- **JavaScript Frameworks (React, Vue, Angular)**: These frameworks use virtual DOM diffing and other optimizations that manage DOM updates efficiently without directly manipulating the DOM tree.
- **DOM Libraries (jQuery)**: Libraries like jQuery can provide abstraction and utilities to simplify DOM manipulations and ensure cross-browser compatibility, at the cost of additional library overhead.
- **Web Components**: Create reusable custom elements that encapsulate behavior and styles, which can help in reducing direct DOM manipulations for common UI components.

In conclusion, effective DOM manipulation requires a careful consideration of trade-offs between performance, complexity, and maintaining existing event bindings or element data. Your choice may depend on the specific use case and performance requirements of the application.

Related benchmarks:

createContextualFragment vs innerHMTL - w/ Dom Destroy and Replace (version: 4)

Test speed of createContextualFragment append nodes vs replacing innerHTML.

Comparing performance of: innerHTML vs createContextualFragment - replaceChildren vs createContextualFragment - replace whole div vs cloneNode(true) - replace whole div vs cloneNode(true) - clear with innerHTML vs createContextualFragment - clear with innerHTML

Created: one month ago by: Registered User

Jump to the latest result

innerHTML

createContextualFragment - replaceChildren

createContextualFragment - replace whole div

cloneNode(true) - replace whole div

cloneNode(true) - clear with innerHTML

createContextualFragment - clear with innerHTML

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one month ago):