Benchmark: DOMParser vs InnerHTML benchmark for svg parsing

HTML Preparation code:

<p>Some paragraph</p>

Script Preparation code:

var htmlBody = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="512" height="512" viewBox="0 0 512 512"><path fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="m312.55 479.9l-56.42-114l-44.62-57a72.37 72.37 0 0 1-10.06-36.9V143.64H217a40 40 0 0 1 40 40v182.21"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M127.38 291.78v-74.07s37-74.07 74.07-74.07"/><path fill="currentColor" d="M368.09 291.78a18.49 18.49 0 0 1-10.26-3.11L297.7 250a21.18 21.18 0 0 1-9.7-17.79v-23.7a5.65 5.65 0 0 1 8.69-4.77l81.65 54.11a18.52 18.52 0 0 1-10.29 33.93ZM171.91 493.47a18.5 18.5 0 0 1-14.83-7.41c-6.14-8.18-4-17.18 3.7-25.92l59.95-74.66a7.41 7.41 0 0 1 10.76 2.06c1.56 2.54 3.38 5.65 5.19 9.09c5.24 9.95 6 16.11-1.68 25.7c-8 10-52 67.44-52 67.44c-2.62 2.98-7.23 3.7-11.09 3.7Z"/><circle cx="257" cy="69.56" r="37.04" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>`;
var domParser = new DOMParser();

Tests:

DOMParser
const doc = domParser.parseFromString(htmlBody, 'text/html'); doc.querySelector('h3');
InnerHTML
const container = document.createElement('svg'); 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: 3 months ago)

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

Browser/OS: Chrome 144 on Windows

View result in a separate tab

Test name	Executions per second
DOMParser	4526.0 Ops/sec
InnerHTML	28106.9 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 benchmark and explain what's being tested, compared, and their pros and cons.

**Benchmark Overview**

The benchmark compares two approaches to parse and query an SVG element:

1. **DOMParser**: Using the `DOMParser` API to parse the HTML string and then querying the parsed document.
2. **InnerHTML**: Using the `innerHTML` property of a `<div>` element to set the HTML content and then querying the resulting element.

**What is being tested?**

The benchmark measures the performance of these two approaches on Firefox 122 on Windows 10 Desktop.

**Options Compared**

* `DOMParser`: A web API that allows parsing HTML strings into DOM documents.
* `InnerHTML`: A property that sets the HTML content of an element without parsing it.

**Pros and Cons:**

1. **DOMParser**
	* Pros:
		+ Parses the entire HTML string, which can be useful for complex layouts or validation.
		+ Can be used to parse other types of documents besides HTML (e.g., XML).
	* Cons:
		+ May incur additional overhead due to parsing and DOM creation.
2. **InnerHTML**
	* Pros:
		+ Faster execution time since it doesn't require parsing the entire HTML string.
		+ Reduces memory usage since only a single element is created.
	* Cons:
		+ May not be suitable for complex layouts or validation.
		+ May incur additional overhead due to string manipulation.

**Library: DOMParser**

The `DOMParser` API is part of the web APIs and is used to parse HTML strings into DOM documents. Its primary purpose is to provide a way to work with HTML documents programmatically, making it easier to validate and manipulate the structure of web pages.

**Special JS Feature/Syntax: None mentioned in this benchmark**

However, it's worth noting that the `innerHTML` property uses a technique called "DOM manipulation" which can be faster than parsing the entire HTML string. This is achieved by creating a new DOM document element, setting its innerHTML, and then querying the resulting element.

**Other Alternatives**

* **SVGOMParser**: A more recent API that allows parsing SVG strings into DOM documents. It might offer better performance for SVG-specific use cases.
* **DOM approaches with caching**: Implementing caching mechanisms to store frequently-used HTML fragments or SVG elements could potentially improve performance by reducing the number of times the parser needs to be called.

Keep in mind that benchmark results can vary depending on specific use cases and implementation details.

Related benchmarks:

DOMParser vs InnerHTML benchmark for svg parsing (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):