Benchmark: SVG parsing 999 - MeasureThat.net

HTML Preparation code:

<div id="target"></div>

Script Preparation code:

window.sampleSVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 58 58"><path fill="#26b99a" d="M29 58L3 45V13l26 13z"/><path fill="#556080" d="M29 58l26-13V13L29 26z"/><path fill="#434c6d" d="M3 13L28 0l27 13-26 13z"/></svg>'
window.targetNode = document.getElementById("target")

Tests:

innerHTML
let i = 1000 let wrap = document.createElement("DIV"); do { wrap.innerHTML = window.sampleSVG; let el = wrap.firstChild; wrap.removeChild(el); window.targetNode.appendChild(el); window.targetNode.children; window.targetNode.firstChild.remove() } while(--i)
DOMParser in loop
let i = 1000 let parser = new DOMParser; do { let svgNode = parser.parseFromString(window.sampleSVG, "image/svg+xml").firstChild window.targetNode.appendChild(svgNode) window.targetNode.children; window.targetNode.firstChild.remove() } while(--i)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
innerHTML
DOMParser in loop

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

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

Browser/OS: Chrome 123 on Mac OS X 10.15.7

View result in a separate tab

innerHTML

51/s

DOMParser in loop

2/s

View exact numbers

Test name	Executions per second
✓ innerHTML	51 Ops/sec
DOMParser in loop	2 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 provided JSON and explain what's being tested.

**Benchmark Definition**

The benchmark defines two scripts: `sampleSVG` and `targetNode`. The script `sampleSVG` is an SVG string that will be used in the tests. It contains three paths, which are SVG elements that will be manipulated in the tests. The variable `targetNode` is set to a DOM element with an ID of "target", where the results will be appended.

**Test Cases**

The two test cases are:

1. **innerHTML**: This test case creates a new `DIV` element and appends it to the `targetNode`. It then sets the inner HTML of the `DIV` to the `sampleSVG` string, removes the first child node from the `DIV`, and repeats this process 1000 times in an infinite loop.
2. **DOMParser in loop**: This test case uses the `DOMParser` API to parse the `sampleSVG` string into a DOM tree, which is then appended to the `targetNode`. It repeats this process 1000 times in an infinite loop.

**Libraries and Features**

1. **innerHTML**: This test case uses the built-in `innerHTML` property of HTML elements to set the content of the `DIV` element.
2. **DOMParser**: The second test case uses the `DOMParser` API, which is a part of the W3C DOM standard. It's used to parse XML and SVG strings into DOM trees.

**Pros and Cons**

1. **innerHTML**:
	* Pros: Simple and widely supported, easy to implement.
	* Cons: Can be slower than other methods, especially for larger datasets, as it involves creating a new DOM node and updating the HTML tree.
2. **DOMParser in loop**:
	* Pros: More efficient than using `innerHTML` for large datasets, as it avoids creating unnecessary DOM nodes.
	* Cons: Requires additional setup and parsing time, which can be slower than using `innerHTML`.

Other considerations:

1. **Performance**: The performance of these tests will depend on the specific browser and hardware being used. In general, using `DOMParser` for parsing SVG strings is expected to be faster than using `innerHTML`.
2. **Memory usage**: Both tests create a large number of DOM nodes, which can impact memory usage, especially if running the benchmarks multiple times.
3. **Browser support**: The performance results may vary across different browsers, as each browser has its own optimization and implementation differences.

**Alternatives**

Other alternatives for parsing SVG strings include:

1. **SVGOMatic**: A JavaScript library that provides a simple way to parse and manipulate SVG elements.
2. **svg.js**: Another popular JavaScript library for working with SVG elements.
3. **Canvas rendering**: Instead of using `DOMParser`, you could render the SVG string directly onto a canvas element, which can be faster but requires more expertise.

It's worth noting that these alternatives may have different performance characteristics and trade-offs in terms of complexity and compatibility across browsers.

SVG parsing 999 (version: 0)

fastest way to inject svg in HTML code

Comparing performance of: `innerHTML vs DOMParser in loop`

Created: 2 years ago by: Guest

Go to the latest result

innerHTML

DOMParser in loop

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

SVG parsing 999 (version: 0)

fastest way to inject svg in HTML code

Comparing performance of: innerHTML vs DOMParser in loop

Created: 2 years ago by: Guest

Go to the latest result

innerHTML

DOMParser in loop

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: `innerHTML vs DOMParser in loop`