Benchmark: DOMParser vs InnerHTML benchmark 3

HTML Preparation code:

<p>Some paragraph</p>

Script Preparation code:

var htmlBody = `<div>
	<h3>A body coming from an API... or somewhere else</h3>
	<div id="html-mock-body"It can contain regular HTML Elements and scripts with links.</div>
</div>`;
var domParser = new DOMParser();

Tests:

DOMParser
const doc = domParser.parseFromString(htmlBody, 'text/html'); doc.querySelector('h3');
InnerHTML
const container = document.createElement('div'); container.innerHTML = htmlBody; container.querySelector('h3');

Historical Performance Data aggregated from 80 community runs

Desktop Results:

Chrome 59 runs

InnerHTML

118K/s

DOMParser

47K/s

Fastest: InnerHTML (2.5x faster)

View exact numbers

✓ InnerHTML : 118,050 ops/sec
• DOMParser : 47,121 ops/sec

Firefox 11 runs

InnerHTML

171K/s

DOMParser

56K/s

Fastest: InnerHTML (3.1x faster)

View exact numbers

✓ InnerHTML : 170,944 ops/sec
• DOMParser : 55,817 ops/sec

Mobile Results:

Chrome 5 runs

InnerHTML

124K/s

DOMParser

54K/s

Fastest: InnerHTML (2.3x faster)

View exact numbers

✓ InnerHTML : 124,026 ops/sec
• DOMParser : 54,454 ops/sec

Safari 5 runs

InnerHTML

481K/s

DOMParser

169K/s

Fastest: InnerHTML (2.9x faster)

View exact numbers

✓ InnerHTML : 481,058 ops/sec
• DOMParser : 168,766 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
DOMParser
InnerHTML

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 4 months ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:150.0) Gecko/20100101 Firefox/150.0

Browser/OS: Firefox 150 on Linux

View result in a separate tab

InnerHTML

141K/s

DOMParser

72K/s

View exact numbers

Test name	Executions per second
✓ InnerHTML	140,984 Ops/sec
DOMParser	72,187 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the benchmark and explain what's being tested, compared, and the pros and cons of each approach.

**What is being tested?**

The benchmark tests two ways to parse and execute HTML in JavaScript:

1. **DOMParser**: A built-in JavaScript API that parses an HTML string into a Document object.
2. **InnerHTML**: Setting the `innerHTML` property of an element with an HTML string.

**Options compared:**

The benchmark compares the performance of using `DOMParser` versus setting `innerHTML`. This is a common scenario in web development, as both approaches have their trade-offs.

**Pros and cons of each approach:**

### DOMParser

Pros:

* More flexible and powerful than setting `innerHTML`, allowing for more complex parsing and manipulation of HTML documents.
* Can handle non-standard HTML and XML syntax.
* Can be used to create Document objects that can be further manipulated.

Cons:

* Can be slower than setting `innerHTML` due to the overhead of parsing and creating a new Document object.
* Requires more memory, as it creates an additional DOM tree.

###InnerHTML

Pros:

* Faster and more efficient than using `DOMParser`, as it only sets the inner HTML property without creating a new Document object.
* Less memory-intensive, as it doesn't create an additional DOM tree.

Cons:

* Limited to setting the inner HTML property of an element, which can make it harder to manipulate complex HTML documents.
* Can be vulnerable to XSS attacks if the input HTML is not properly sanitized.

**Library usage:**

In this benchmark, `DOMParser` is used as a built-in JavaScript API. The purpose of `DOMParser` is to parse an HTML string into a Document object that can be further manipulated or queried.

**Special JS feature or syntax:**

There doesn't appear to be any special JavaScript features or syntax being tested in this benchmark.

**Other alternatives:**

If you needed to parse and execute HTML, other alternatives could include:

* **XSLT**: An XML-based language for transforming and parsing XML documents.
* **HTMLParser**: A third-party library that provides a more efficient way to parse HTML than the built-in `DOMParser`.
* **jsdom**: A JavaScript port of the popular Python library `BeautifulSoup`, which allows you to parse and manipulate HTML documents in Node.js.

Keep in mind that each alternative has its own trade-offs, pros, and cons, and may be better suited for specific use cases or performance requirements.

DOMParser vs InnerHTML benchmark 3 (version: 2) Benchmark.js

Comparing performance of: `DOMParser vs InnerHTML`

Created: 4 years ago by: Registered User

Go to the latest result

DOMParser

InnerHTML

Historical Performance Data aggregated from 80 community runs

Desktop Results:

Chrome 59 runs

Firefox 11 runs

Mobile Results:

Chrome 5 runs

Safari 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

DOMParser vs InnerHTML benchmark 3 (version: 2) Benchmark.js

Comparing performance of: DOMParser vs InnerHTML

Created: 4 years ago by: Registered User

Go to the latest result

DOMParser

InnerHTML

Historical Performance Data aggregated from 80 community runs

Desktop Results:

Chrome 59 runs

Firefox 11 runs

Mobile Results:

Chrome 5 runs

Safari 5 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: `DOMParser vs InnerHTML`