Benchmark: CreateElement vs DOM Parser (v2)

Script Preparation code:

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

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; }
DOMParser (reused)
function test_DOMParser_reuse() { return parser.parseFromString(testString, 'text/html').body}

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
CreateElement
CreateHTMLDocument
DOMParser
DOMParser (reused)

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
CreateElement	155271152.0 Ops/sec
CreateHTMLDocument	165764976.0 Ops/sec
DOMParser	151246272.0 Ops/sec
DOMParser (reused)	168522224.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 its components.

**Benchmark Overview**

The benchmark, hosted on MeasureThat.net, compares three approaches to create a HTML document: `createElement`, `DOMParser`, and `CreateHTMLDocument`. The goal is to determine which approach is faster and more efficient.

**Options Being Compared**

1. **`createElement`**: Creates a new HTML element using the `document.createElement()` method.
2. **`DOMParser` (reused)**: Reuses an existing instance of the `DOMParser` class to parse the HTML string.
3. **`CreateHTMLDocument`**: Creates a new HTML document using the `document.implementation.createHTMLDocument()` method.

**Pros and Cons of Each Approach**

1. **`createElement`**:
	* Pros: Simple, easy to use, and widely supported.
	* Cons: Creates a new DOM node, which can lead to increased memory usage.
2. **`DOMParser` (reused)**:
	* Pros: Reuses an existing instance of `DOMParser`, reducing overhead.
	* Cons: May require additional setup and parsing steps.
3. **`CreateHTMLDocument`**:
	* Pros: Creates a new HTML document, which can be more efficient than creating individual elements.
	* Cons: Requires a specific method call, and its availability might vary across browsers.

**Library/Functionality Used**

1. `DOMParser`: A built-in JavaScript class that parses an HTML string into a Document object.
2. `document.implementation.createHTMLDocument()`: A method provided by the `document.implementation` interface, which creates a new HTML document.

**Special JS Feature/Syntax (None in this case)**

There are no special features or syntax used in this benchmark.

**Other Alternatives**

If you're looking for alternative approaches to create an HTML document, consider:

1. **`innerHTML`**: Setting the `innerHTML` property of an existing element.
2. **`createDocumentFragment()`**: Creating a Document Fragment object using the `createDocumentFragment()` method.

Keep in mind that these alternatives might have their own trade-offs and implications for performance, memory usage, or browser compatibility.

I hope this explanation helps you understand the benchmark and its components!

Related benchmarks:

CreateElement vs DOM Parser (v2) (version: 0)

Comparing performance of: CreateElement vs CreateHTMLDocument vs DOMParser vs DOMParser (reused)

Created: 3 years ago by: Guest

Jump to the latest result

CreateElement

CreateHTMLDocument

DOMParser

DOMParser (reused)

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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