Benchmark: svg: DOMParser vs innerHTML

Script Preparation code:

function stringToSVG1(svgString) {
    const parser = new DOMParser();
    const doc = parser.parseFromString(svgString, 'image/svg+xml');
    return doc.documentElement;
}
function stringToSVG2(svgString) {
    const div = document.createElement("DIV");
    div.innerHTML = svgString;
    const ret = div.firstChild;
    div.removeChild(ret);
    return ret;
}

var svgString = `<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>`;

Tests:

DOMParser
let svgElement = stringToSVG1(svgString);
innerHTML
let svgElement = stringToSVG2(svgString);

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: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36

Browser/OS: Chrome 118 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
DOMParser	17028.6 Ops/sec
innerHTML	181639.7 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the explanation of what's tested in this benchmark.

**Benchmark Overview**

The provided JSON represents a benchmarking test that compares the performance of two approaches to parse an SVG string:

1. `DOMParser`
2. Using the `innerHTML` property of an HTML element.

**What is being tested?**

In this benchmark, we're measuring the execution time of creating an SVG element using either of these two methods.

**Options compared**

We have two options being compared:

1. **DOMParser**: This method uses the `DOMParser` API to parse the SVG string into a DOM document.
2. **innerHTML**: This method uses the `innerHTML` property of an HTML element to parse the SVG string and create an SVG element.

**Pros and Cons**

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

* **DOMParser**
	+ Pros:
		- Can handle more complex SVGs with attributes and sub-elements.
		- Can be used for other purposes beyond parsing SVG strings (e.g., parsing HTML strings).
	+ Cons:
		- Can be slower than using `innerHTML` due to the overhead of creating a DOM document.
* **innerHTML**
	+ Pros:
		- Fast and lightweight, making it suitable for high-performance applications.
		- Easy to use and integrate with existing HTML workflows.
	+ Cons:
		- Limited to parsing SVG strings only. Not suitable for other purposes beyond parsing HTML strings.

**Library and purpose**

In this benchmark, the `DOMParser` library is used to parse the SVG string into a DOM document. The `innerHTML` property is used to parse the SVG string and create an SVG element without creating a full-fledged DOM document.

**Special JS feature or syntax**

None are mentioned in this specific benchmark.

**Alternative approaches**

Other alternatives for parsing SVG strings could include:

* Using the `svg` tag directly (e.g., `<svg width="100" height="100">...</svg>`) and then extracting the contents.
* Using a third-party library like `svg.js` or `svg-processor`.
* Implementing custom parsing logic using JavaScript's DOM API.

Keep in mind that these alternatives might have their own trade-offs in terms of performance, complexity, and maintainability.

Related benchmarks:

svg: DOMParser vs innerHTML (version: 0)

Comparing performance of: DOMParser vs innerHTML

Created: one year ago by: Guest

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 2 months ago):