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

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

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

Go 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; }

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 8 runs

DOMParser

116.0M/s

.createElement() + .innerHTML

107.6M/s

Nested .createElement() + .appendChild()

107.4M/s

.createHTMLDocument() + .innerHTML

101.1M/s

Fastest: DOMParser (1.1x faster)

View exact numbers

✓ DOMParser: 116,049,184 ops/sec
• .createElement() + .innerHTML: 107,585,472 ops/sec
• Nested .createElement() + .appendChild(): 107,419,896 ops/sec
• .createHTMLDocument() + .innerHTML: 101,125,896 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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: 3 months ago)

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

Browser/OS: Chrome 148 on Windows

View result in a separate tab

Nested .createElement() + .appendChild()

26.6M/s

.createHTMLDocument() + .innerHTML

26.0M/s

.createElement() + .innerHTML

25.9M/s

DOMParser

25.7M/s

View exact numbers

Test name	Executions per second
✓ Nested .createElement() + .appendChild()	26,638,654 Ops/sec
.createHTMLDocument() + .innerHTML	25,968,126 Ops/sec
.createElement() + .innerHTML	25,887,926 Ops/sec
DOMParser	25,742,468 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.

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

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

Go to the latest result

.createElement() + .innerHTML

.createHTMLDocument() + .innerHTML

DOMParser

Nested .createElement() + .appendChild()

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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