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');

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: 12 days ago)

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 18_3_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.3.1 Mobile/15E148 Safari/604.1

Browser/OS: Mobile Safari 18 on iOS 18.3.2

View result in a separate tab

Test name	Executions per second
DOMParser	141343.4 Ops/sec
InnerHTML	378089.9 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months 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.

Related benchmarks:

DOMParser vs InnerHTML benchmark 3 (version: 2)

Comparing performance of: DOMParser vs InnerHTML

Created: 2 years ago by: Registered User

Jump to the latest result

DOMParser

InnerHTML

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):