Benchmark: .createHTMLDocument() vs DOMParser() vs .createContextualFragment()

Script Preparation code:

const count = 20_000;
const testString = '<div>' + (new Array(count)).fill('').join('<b>x</b>') + '</div>';

Tests:

.createHTMLDocument() + .innerHTML
function test_createHTMLDocument() { const doc = document.implementation.createHTMLDocument(''); doc.body.innerHTML = testString; return doc.body; }
DOMParser
function test_DOMParser() { return (new DOMParser()).parseFromString(testString, 'text/html').body; }
Nested .createElement() + .appendChild()
function test_documentFragment() { return document.createRange().createContextualFragment(testString); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
.createHTMLDocument() + .innerHTML
DOMParser
Nested .createElement() + .appendChild()

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 17 days ago)

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

Browser/OS: Chrome 135 on Windows

View result in a separate tab

Test name	Executions per second
.createHTMLDocument() + .innerHTML	226807072.0 Ops/sec
DOMParser	218004352.0 Ops/sec
Nested .createElement() + .appendChild()	213679568.0 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 17 days ago):

LLMs can make mistakes. Check important info.

In this benchmark, three different methods for generating HTML content within a JavaScript environment are compared. The methods tested are:

1. **`.createHTMLDocument()`** combined with `.innerHTML`
2. **`DOMParser`**
3. **`createContextualFragment()`** from `document.createRange()`

### Overview of the Methods

1. **`.createHTMLDocument()` + `.innerHTML`**:
   - **Purpose**: This method creates a new HTML document with a specified title and then assigns a string of HTML to the `innerHTML` property of the body.
   - **Pros**:
     - Simple syntax, which makes it easy to understand and use for dynamically generating HTML.
     - Ideal for large blocks of HTML where you want to create a standalone document structure.
   - **Cons**:
     - Can be performance costly due to the need to fully parse the string into a new document context.
     - May have security concerns regarding the handling of untrusted HTML input, depending on the context in which it is used.

2. **`DOMParser`**:
   - **Purpose**: This function provides a way to parse XML or HTML source code from a string into a DOM Document object.
   - **Pros**:
     - Provides flexibility to parse HTML/XML from strings. Great when input needs dynamic manipulation or when parsing well-structured XML.
     - Allows better control over error handling and could manage malformed HTML more gracefully.
   - **Cons**:
     - The parsing can be relatively slower than direct assignments to `innerHTML`, especially for very large HTML strings.
     - Developers may need to ensure the content type ('text/html') is set correctly.

3. **`createContextualFragment()`**:
   - **Purpose**: Creates a `DocumentFragment` from a string of HTML, which can then be appended to the DOM. This method is part of the `Range` interface.
   - **Pros**:
     - The `DocumentFragment` is a lightweight container, which allows for batch DOM manipulations and is generally more efficient for appending multiple nodes.
     - It avoids the cost of creating an entire standalone document unlike `.createHTMLDocument()`, making it beneficial for performance particularly in more extensive manipulations.
   - **Cons**:
     - May be less straightforward for beginners than setting `innerHTML` directly, particularly for complex HTML structures.
     - In some cases, it may not handle script or style elements within strings directly as expected.

### Alternatives and Considerations

While these three methods are compared in this benchmark, developers have various alternatives available depending on their needs:

- **Direct DOM Manipulation**: Using methods like `.createElement()`, `.appendChild()`, and others to build elements would generally be the most flexible, though it might require more code compared to the other options.
  
- **Template Literals**: For cases where you need to create HTML with interpolation, ES6 template literals could be used along with `.innerHTML`, although this method carries the same risks associated with `innerHTML`.

- **Frontend Frameworks**: Libraries and frameworks like React, Angular, or Vue.js have their own systems for managing DOM updates that are highly optimized and provide better management compared to the direct manipulation of the DOM.

### Conclusion

When choosing between these methods, performance, ease of use, security, and the specific application requirements should guide the decision. The benchmark results indicate relative performance among these methods, suggesting that `.createHTMLDocument()` yields the highest number of executions per second in this context, followed closely by `DOMParser`, and then `createContextualFragment()`.

Related benchmarks:

.createHTMLDocument() vs DOMParser() vs .createContextualFragment() (version: 1)

Comparing performance of: .createHTMLDocument() + .innerHTML vs DOMParser vs Nested .createElement() + .appendChild()

Created: 17 days ago by: Guest

Jump to the latest result

.createHTMLDocument() + .innerHTML

DOMParser

Nested .createElement() + .appendChild()

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 17 days ago):