Benchmark: SVG parsing - 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 do { window.targetNode.innerHTML = window.sampleSVG window.targetNode.children; window.targetNode.firstChild.remove() } while(--i)
DOMParser in loop
let i = 1000 do { let parser = new DOMParser let svgNode = parser.parseFromString(window.sampleSVG, "image/svg+xml").firstChild window.targetNode.appendChild(svgNode) window.targetNode.children; window.targetNode.firstChild.remove() } while(--i)
DOMParser + cloneNode
let parser = new DOMParser let svgNode = parser.parseFromString(window.sampleSVG, "image/svg+xml").firstChild let i = 1000 do { window.targetNode.appendChild(svgNode.cloneNode(true)) 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
DOMParser + cloneNode

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36

Browser/OS: Chrome 132 on Linux

View result in a separate tab

Test name	Executions per second
innerHTML	59.0 Ops/sec
DOMParser in loop	27.4 Ops/sec
DOMParser + cloneNode	132.3 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what's being tested.

**Benchmark Description**

The benchmark measures the performance of injecting SVG code into HTML using different approaches.

**Options Compared**

Three options are compared:

1. **innerHTML**: This approach uses JavaScript's built-in `innerHTML` property to set the content of an element.
2. **DOMParser in loop**: This approach uses the `DOMParser` API to parse the SVG XML and then appends it to the target node.
3. **DOMParser + cloneNode**: This approach is similar to the previous one, but it uses `cloneNode(true)` to create a deep copy of the parsed SVG node before appending it to the target node.

**Pros and Cons**

Here are some pros and cons for each approach:

1. **innerHTML**:
	* Pros: Simple, easy to implement, and widely supported.
	* Cons: Can be slow and inefficient, especially for large amounts of data.
2. **DOMParser in loop**:
	* Pros: Can be efficient for large datasets, as it doesn't require creating a new DOM node.
	* Cons: May have slower parsing performance due to the XML parsing step.
3. **DOMParser + cloneNode**:
	* Pros: Balances efficiency and simplicity by using `cloneNode` to create a copy of the parsed SVG node.
	* Cons: Requires more resources than the `innerHTML` approach, as it creates a new DOM node.

**Library and Special Features**

The benchmark uses the `DOMParser` API, which is a built-in JavaScript library for parsing XML documents. The `cloneNode` method is also used, which is a standard method for creating copies of DOM nodes.

**Other Considerations**

* **Browser Support**: All three approaches are likely supported by modern browsers.
* **Security**: Be aware that using `innerHTML` can introduce security risks if not properly sanitized.

**Alternative Approaches**

Some alternative approaches to injecting SVG code into HTML might include:

1. **SVGElement**: Creating an SVG element directly and manipulating its attributes could be a faster approach, but it requires more DOM expertise.
2. **Canvas**: Using the Canvas API to render the SVG image could provide better performance for complex graphics, but it may not be suitable for simple SVG injection use cases.

Keep in mind that these alternative approaches might require additional setup and configuration, and their performance may vary depending on the specific use case.

In summary, the benchmark provides a useful comparison of different approaches for injecting SVG code into HTML. The choice of approach depends on factors like performance requirements, simplicity, and browser support.

Related benchmarks:

SVG parsing (version: 0)

fastest way to inject svg in HTML code

Comparing performance of: innerHTML vs DOMParser in loop vs DOMParser + cloneNode

Created: 6 years ago by: Guest

Jump to the latest result

innerHTML

DOMParser in loop

DOMParser + cloneNode

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):