Benchmark: .createElement() vs .createHTMLDocument() vs DOMParser() vs .appendChild()

.createElement() vs .createHTMLDocument() vs DOMParser() vs .appendChild() (version: 0)

Test performance between using document.createElement(), document.createHTMLDocument(), DOMParser(), and building up a DOM tree with .appendChild()

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

Created: 2 years ago by: Guest

Jump to the latest result

Script Preparation code:

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

Tests:

.createElement() + .innerHTML
function test_innerHTML() { const body = document.createElement('body'); body.innerHTML = testString; return body; }
.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_innerHTML() { let i = -1; const div = document.createElement('div'); while (++i < count) { const b = document.createElement('b'); b.textContent = 'x'; div.appendChild(b); } return div; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:149.0) Gecko/20100101 Firefox/149.0

Browser/OS: Firefox 149 on Linux

View result in a separate tab

Test name	Executions per second
.createElement() + .innerHTML	621495360.0 Ops/sec
.createHTMLDocument() + .innerHTML	680725440.0 Ops/sec
DOMParser	697842112.0 Ops/sec
Nested .createElement() + .appendChild()	680452736.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what is being tested, compared options, their pros and cons, and other considerations.

**Benchmark Overview**

The test case measures the performance of different approaches to create a DOM (Document Object Model) structure:

1. Using `document.createElement()` and setting its `innerHTML` property
2. Using `document.createHTMLDocument()` and setting its body's `innerHTML` property
3. Using a `DOMParser` object to parse an HTML string and get the resulting document
4. Building up a DOM tree using nested `document.createElement()` calls and appending elements

**Library and Syntax**

In this benchmark, we're using JavaScript-specific libraries and features:

* `document.createElement()`: This is a built-in JavaScript method for creating new elements.
* `document.createHTMLDocument()`: This is a method introduced in HTML5 that creates a new document with the specified MIME type (in this case, 'text/html').
* `DOMParser`: This is a built-in JavaScript object that can parse an HTML string and return a DOM document.

**Comparison of Options**

The four options being compared are:

1. **`document.createElement() + .innerHTML`**: Creates an element using `createElement()` and sets its `innerHTML` property to the test string.
	* Pros: Simple, fast, and widely supported.
	* Cons: Can lead to security issues if not properly sanitized, as `innerHTML` can execute arbitrary code.
2. **`.createHTMLDocument() + .innerHTML`**: Creates a new document using `createHTMLDocument()` and sets its body's `innerHTML` property to the test string.
	* Pros: Allows for more precise control over the DOM structure and can help prevent security issues related to `innerHTML`.
	* Cons: Can be slower than other options due to the overhead of creating a new document object.
3. **`DOMParser`**: Parses an HTML string using a `DOMParser` object and returns the resulting document.
	* Pros: Fast, lightweight, and allows for precise control over the DOM structure.
	* Cons: Requires creating a temporary DOM parser object, which can lead to memory allocation issues if not properly managed.
4. **Nested `document.createElement() + .appendChild()`**: Creates elements using nested calls to `createElement()` and appends them to each other to build up a complex DOM tree.
	* Pros: Allows for fine-grained control over the DOM structure and can be useful in certain scenarios (e.g., when building a complex layout).
	* Cons: Can lead to slower performance due to the overhead of creating multiple elements and appending them.

**Other Considerations**

The benchmark also uses special JavaScript features, such as:

* The `fill()` method used to create an array of length 20,000.
* The `join()` method used to concatenate strings in a loop.

However, since these features are not specific to the compared options, they do not affect the analysis.

**Alternatives**

Other approaches could be considered for building DOM structures, such as:

* Using template literals or string concatenation with `${}` to build up a string and then passing it to `createElement()` or `createHTMLDocument()`
* Using libraries like jQuery or React, which provide their own ways of building DOM structures
* Using other parsing methods, such as using a library like `html-parser` to parse an HTML string

However, the benchmark focuses specifically on comparing these four options, and the alternatives mentioned above are not part of the comparison.

Related benchmarks: