Benchmark: DOMParser vs InnerHTML benchmark asdadad

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/xml'); console.log(doc.querySelector('h3'))
InnerHTML
const container = document.createElement('div'); container.innerHTML = htmlBody; console.log(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: 2 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36

Browser/OS: Chrome 123 on Windows

View result in a separate tab

Test name	Executions per second
DOMParser	7564.5 Ops/sec
InnerHTML	7283.6 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 Overview**

The provided benchmark compares two approaches to parse and manipulate HTML in a web page: DOMParser and InnerHTML. The goal is to determine which method is faster for parsing and querying an HTML string.

**Script Preparation Code**

The script preparation code creates two variables:

* `htmlBody`: a string containing HTML markup with a `<div>` element, an `<h3>` heading, and another `<div>` element.
* `domParser`: an instance of the `DOMParser` object, which is used to parse the HTML string.

**Html Preparation Code**

The html preparation code contains a simple paragraph tag: `<p>Some paragraph</p>\r\n`.

**Test Cases**

There are two test cases:

1. **DOMParser**: This test case uses the `DOMParser.parseFromString()` method to parse the `htmlBody` string and then queries the resulting document object using `doc.querySelector('h3')`.
2. **InnerHTML**: This test case creates a new `<div>` element, sets its inner HTML to the `htmlBody` string, and then queries the resulting element using `container.querySelector('h3')`.

**Library and Purpose**

The `DOMParser` library is part of the JavaScript standard library (ECMAScript) and provides a way to parse HTML strings into DOM documents. Its purpose is to simplify working with HTML data in JavaScript applications.

**Special JS Feature or Syntax**

None mentioned explicitly, but it's worth noting that `innerHTML` can be vulnerable to XSS attacks if not properly sanitized, as it allows executing arbitrary JavaScript code within the context of the parent element.

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

* **DOMParser**:
	+ Pros: faster, more efficient, and safer (as it sanitizes the input HTML).
	+ Cons: may not support all HTML features or attributes.
* **InnerHTML**:
	+ Pros: simpler to implement and easier to use for certain cases.
	+ Cons: slower, less efficient, and more vulnerable to XSS attacks.

**Alternatives**

If you need to parse or manipulate HTML in JavaScript, you can consider the following alternatives:

1. `outerHTML`: Similar to `innerHTML`, but it doesn't execute any code within the element's context.
2. `textContent` and `appendChild()`: Can be used to set an element's text content and append child elements, respectively.
3. Third-party libraries like jQuery or Zepto: While not always necessary, these libraries can simplify HTML manipulation tasks.

In summary, DOMParser is generally faster and safer for parsing and querying HTML strings, while InnerHTML is simpler but may introduce security risks if not used carefully.

Related benchmarks:

DOMParser vs InnerHTML benchmark asdadad (version: 0)

Comparing performance of: DOMParser vs InnerHTML

Created: 2 years ago by: Guest

Jump to the latest result

DOMParser

InnerHTML

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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