Benchmark: CreateElement vs DOM Parser

Script Preparation code:

var testString = '<body>' + Array(100001).join('<div>x</div>') + '</body>';

Tests:

CreateElement
function test_innerHTML() { var b = document.createElement('body'); b.innerHTML = testString; return b; }
CreateHTMLDocument
function test_createHTMLDocument() { var d = document.implementation.createHTMLDocument(''); d.body.innerHTML = testString; return d.body; }
DOMParser
function test_DOMParser() { return (new DOMParser).parseFromString(testString, 'text/html').body; }

Historical Performance Data aggregated from 85 community runs

Desktop Results:

Chrome 78 runs

CreateElement

158.8M/s

DOMParser

155.6M/s

CreateHTMLDocument

151.9M/s

View exact numbers

✓ CreateElement: 158,767,824 ops/sec
• DOMParser: 155,560,896 ops/sec
• CreateHTMLDocument: 151,868,032 ops/sec

Mobile Results:

Chrome 7 runs

CreateElement

89.3M/s

CreateHTMLDocument

87.3M/s

DOMParser

82.0M/s

View exact numbers

✓ CreateElement: 89,271,624 ops/sec
• CreateHTMLDocument: 87,324,992 ops/sec
• DOMParser: 82,031,072 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
CreateHTMLDocument
DOMParser

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36

Browser/OS: Chrome 148 on Linux

View result in a separate tab

CreateHTMLDocument

190.5M/s

DOMParser

189.4M/s

CreateElement

188.6M/s

View exact numbers

Test name	Executions per second
✓ CreateHTMLDocument	190,496,912 Ops/sec
DOMParser	189,405,696 Ops/sec
CreateElement	188,612,672 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.

**Benchmark Overview**

The benchmark compares three approaches to create an HTML document: `createElement`, `createHTMLDocument`, and `DOMParser`. The goal is to determine which approach is faster in terms of execution speed.

**Options Being Compared**

1. **Create Element**: This approach uses the `document.createElement` method to create a new element, which is then used as the root of the HTML document.
2. **Create HTML Document**: This approach uses the `document.implementation.createHTMLDocument` method to create a new HTML document, which is then used to set the innerHTML.
3. **DOM Parser**: This approach uses the `DOMParser` API to parse an HTML string and create a new document from it.

**Pros and Cons of Each Approach**

1. **Create Element**:
	* Pros: Simple, lightweight, and widely supported by modern browsers.
	* Cons: May not be suitable for large documents or complex scenarios, as it requires multiple DOM mutations (e.g., creating the element, setting its innerHTML).
2. **Create HTML Document**:
	* Pros: Suitable for large documents or complex scenarios, as it creates a new document object that can be easily manipulated.
	* Cons: May be slower due to the overhead of creating a new document object and parsing the HTML string.
3. **DOM Parser**:
	* Pros: Fast and efficient for small to medium-sized documents, as it leverages the browser's existing DOM parser capabilities.
	* Cons: May not be suitable for very large documents or complex scenarios, as it can lead to increased memory usage and slower performance.

**Library/Technology Used**

1. **DOMParser**: The `DOMParser` API is a built-in part of the ECMAScript standard, which means it's supported by all modern browsers without any additional libraries or dependencies.
2. **document.implementation.createHTMLDocument**: This method is also part of the ECMAScript standard and is supported by most modern browsers.

**Special JS Features/Syntax**

None mentioned in this benchmark.

**Other Considerations**

* The benchmark uses a large HTML string (`testString`) to simulate a real-world scenario, which helps to minimize the impact of variables like JavaScript engine optimizations or caching.
* The benchmark is run on a desktop platform using Chrome 129, which may not be representative of mobile devices or older browsers.

**Alternatives**

Other approaches to create an HTML document include:

1. **String concatenation**: Creating an HTML string by concatenating individual elements (e.g., `<div>...</div>`).
2. **Existing DOM manipulation**: Modifying an existing DOM tree by appending new elements or setting the innerHTML of an existing element.
3. **Template engines**: Using a template engine like Handlebars or Mustache to generate HTML templates.

However, these alternatives may not be suitable for this benchmark, as they would require additional setup and configuration to compare their performance with `createElement`, `createHTMLDocument`, and `DOMParser`.

CreateElement vs DOM Parser (version: 0)

Comparing performance of: `CreateElement vs CreateHTMLDocument vs DOMParser`

Created: 4 years ago by: Guest

Go to the latest result

CreateElement

CreateHTMLDocument

DOMParser

Historical Performance Data aggregated from 85 community runs

Desktop Results:

Chrome 78 runs

Mobile Results:

Chrome 7 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

CreateElement vs DOM Parser (version: 0)

Comparing performance of: CreateElement vs CreateHTMLDocument vs DOMParser

Created: 4 years ago by: Guest

Go to the latest result

CreateElement

CreateHTMLDocument

DOMParser

Historical Performance Data aggregated from 85 community runs

Desktop Results:

Chrome 78 runs

Mobile Results:

Chrome 7 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 vs CreateHTMLDocument vs DOMParser`