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

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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/145.0.0.0 Safari/537.36

Browser/OS: Chrome 145 on Windows

View result in a separate tab

Test name	Executions per second
CreateElement	113764568.0 Ops/sec
CreateHTMLDocument	121103800.0 Ops/sec
DOMParser	117538944.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.

**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`.

Related benchmarks:

CreateElement vs DOM Parser (version: 0)

Comparing performance of: CreateElement vs CreateHTMLDocument vs DOMParser

Created: 4 years ago by: Guest

Jump to the latest result

CreateElement

CreateHTMLDocument

DOMParser

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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