Benchmark: HTML parsing 457

Script Preparation code:

var src=`
<div id='un'>Un</div>
<div id='deux'>Deux</div>
<table>
  <tbody>
    <tr><td><a/td><td>b</td><td>c</td></tr>
    <tr><td>f</td><td>e</td><td>d</td></tr>
  </tbody>
  
 </table>
`;

Tests:

innerHTML
const s = document.createElement('section'); s.innerHTML = src; s.cloneNode(true);
Range
const f= document.createRange().createContextualFragment(src); f.cloneNode(true);
DOMParser
doc = new DOMParser().parseFromString(src, 'text/html'); doc.body.cloneNode(true);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
innerHTML
Range
DOMParser

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/130.0.0.0 Safari/537.36

Browser/OS: Chrome 130 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
innerHTML	23912.8 Ops/sec
Range	24740.0 Ops/sec
DOMParser	12816.7 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net!

**Benchmark Definition Json**

The provided JSON represents a benchmark definition, which defines the problem to be measured and the script preparation code. In this case, we have three benchmarks:

1. **HTML parsing 457**: This benchmark measures the performance of creating an HTML document from a string. The script preparation code generates an HTML string with two `div` elements and a `table` element containing some links.
2. (Empty) **HTML Preparation Code**: There is no HTML preparation code provided, which means that the test case will use the input HTML string generated in the script preparation code.

**Test Cases**

The individual test cases are defined as an array of objects, each representing a specific scenario to be measured:

1. **innerHTML**:
	* Benchmark definition: `const s = document.createElement('section');\r\ns.innerHTML = src;\r\ns.cloneNode(true);`
	* Test name: `innerHTML`
This test case measures the performance of cloning an HTML element using its `innerHTML` property.
2. **Range**:
	* Benchmark definition: `const f= document.createRange().createContextualFragment(src);\r\nf.cloneNode(true);`
	* Test name: `Range`
This test case measures the performance of creating a DOM range from an HTML string and cloning it.
3. **DOMParser**:
	* Benchmark definition: `doc = new DOMParser().parseFromString(src, 'text/html');\r\ndoc.body.cloneNode(true);`
	* Test name: `DOMParser`
This test case measures the performance of parsing an HTML string using a DOM parser and cloning its body.

**Library and Special JS Features**

In this benchmark, we can identify a few libraries and special JavaScript features:

1. **`DOMParser`**: A built-in JavaScript API used to parse HTML strings into Document objects.
2. (`innerHTML`): A property of the `HTMLElement` interface that sets or gets the inner HTML content of an element.

**Options Compared**

The benchmark compares three different approaches for creating and cloning an HTML document:

1. **`DOMParser`**: Parses an HTML string into a Document object and clones its body.
2. (`innerHTML`): Sets the inner HTML content of an `HTMLElement` instance, which creates a new document fragment.
3. (`Range`): Creates a DOM range from an HTML string using `document.createRange()` and then clones it.

**Pros and Cons**

Here are some pros and cons for each approach:

1. **`DOMParser`**:
	* Pros: Faster parsing time, accurate representation of the original HTML structure.
	* Cons: May be slower than other approaches for very large or complex documents.
2. (`innerHTML`):
	* Pros: Quick and efficient, no need to parse the entire HTML string.
	* Cons: Creates a new document fragment, may not preserve the original HTML structure accurately.
3. (`Range`):
	* Pros: Can create a DOM range that spans multiple elements, potentially more accurate than `innerHTML`.
	* Cons: May be slower due to the creation of a DOM range and subsequent cloning.

**Other Alternatives**

If you wanted to test alternative approaches for creating and cloning an HTML document, some options could include:

1. **`createDocumentFragment()`**: Creates a new document fragment that can be used as an HTML document.
2. **`HTMLImports` API**: A newer API for importing and manipulating HTML documents.

Please note that these alternatives may have different performance characteristics or requirements compared to the tested approaches.

Related benchmarks:

HTML parsing 457 (version: 2)

HTML parsing

Comparing performance of: innerHTML vs Range vs DOMParser

Created: one year ago by: Registered User

Jump to the latest result

innerHTML

Range

DOMParser

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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