Benchmark: React svg inline vs use 500x

HTML Preparation code:

<svg className="container" xmlns="http://www.w3.org/2000/svg" style="position: absolute; width: 0; height: 0" width="0" height="0">
	<defs>
    <symbol id="umbrella" viewBox="0 0 32 32">
        <path d="M27 14h5c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2v0zM27 14c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2v0 14c0 1.112-0.895 2-2 2-1.112 0-2-0.896-2-2.001v-1.494c0-0.291 0.224-0.505 0.5-0.505 0.268 0 0.5 0.226 0.5 0.505v1.505c0 0.547 0.444 0.991 1 0.991 0.552 0 1-0.451 1-0.991v-14.009c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-5.415 6.671-9.825 15-9.995v-1.506c0-0.283 0.224-0.499 0.5-0.499 0.268 0 0.5 0.224 0.5 0.499v1.506c8.329 0.17 15 4.58 15 9.995h-5z"></path>
	</symbol>
	</defs>
</svg>

<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>

<div id="main"></div>

​x
 
<svg className="container" xmlns="http://www.w3.org/2000/svg" style="position: absolute; width: 0; height: 0" width="0" height="0">
    <defs>
    <symbol id="umbrella" viewBox="0 0 32 32">
        <path d="M27 14h5c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2v0zM27 14c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2v0 14c0 1.112-0.895 2-2 2-1.112 0-2-0.896-2-2.001v-1.494c0-0.291 0.224-0.505 0.5-0.505 0.268 0 0.5 0.226 0.5 0.505v1.505c0 0.547 0.444 0.991 1 0.991 0.552 0 1-0.451 1-0.991v-14.009c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-5.415 6.671-9.825 15-9.995v-1.506c0-0.283 0.224-0.499 0.5-0.499 0.268 0 0.5 0.224 0.5 0.499v1.506c8.329 0.17 15 4.58 15 9.995h-5z"></path>
    </symbol>
    </defs>
</svg>
​
<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
​
<div id="main"></div>
​

Script Preparation code:

var SVGInline = function() {
  return React.createElement(
    "svg",
    { className: "office", xmlns: "http://www.w3.org/2000/svg", width: 190, height: 190, viewBox: "0 0 188.5 188.5",
     dangerouslySetInnerHTML: {
       __html: '<path d="M27 14h5c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2v0zM27 14c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2v0 14c0 1.112-0.895 2-2 2-1.112 0-2-0.896-2-2.001v-1.494c0-0.291 0.224-0.505 0.5-0.505 0.268 0 0.5 0.226 0.5 0.505v1.505c0 0.547 0.444 0.991 1 0.991 0.552 0 1-0.451 1-0.991v-14.009c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-5.415 6.671-9.825 15-9.995v-1.506c0-0.283 0.224-0.499 0.5-0.499 0.268 0 0.5 0.224 0.5 0.499v1.506c8.329 0.17 15 4.58 15 9.995h-5z"></path>'
     }
    },
  );
}

var SVGUse = function() {
	return React.createElement(
      "svg",
      { className: "office", xmlns: "http://www.w3.org/2000/svg", width: 190, height: 190, viewBox: "0 0 188.5 188.5" },
      React.createElement("use", { xlinkHref: '#umbrella' })
    );
}

 
var SVGInline = function() {  return React.createElement(    "svg",    { className: "office", xmlns: "http://www.w3.org/2000/svg", width: 190, height: 190, viewBox: "0 0 188.5 188.5",     dangerouslySetInnerHTML: {       __html: '<path d="M27 14h5c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2v0zM27 14c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2v0 14c0 1.112-0.895 2-2 2-1.112 0-2-0.896-2-2.001v-1.494c0-0.291 0.224-0.505 0.5-0.505 0.268 0 0.5 0.226 0.5 0.505v1.505c0 0.547 0.444 0.991 1 0.991 0.552 0 1-0.451 1-0.991v-14.009c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-5.415 6.671-9.825 15-9.995v-1.506c0-0.283 0.224-0.499 0.5-0.499 0.268 0 0.5 0.224 0.5 0.499v1.506c8.329 0.17 15 4.58 15 9.995h-5z"></path>'     }    },  );}​var SVGUse = function() {    return React.createElement(      "svg",      { className: "office", xmlns: "http://www.w3.org/2000/svg", width: 190, height: 190, viewBox: "0 0 188.5 188.5" },      React.createElement("use", { xlinkHref: '#umbrella' })    );}​

Tests:

SVGInline
for(i=0;i<500;i++){ ReactDOM.render(React.createElement(SVGInline, null), document.querySelector("#main")); }
for(i=0;i<500;i++){
ReactDOM.render(React.createElement(SVGInline, null), document.querySelector("#main"));
}
SVGUse
for(i=0;i<500;i++){ ReactDOM.render(React.createElement(SVGUse, null), document.querySelector("#main")); }
for(i=0;i<500;i++){
ReactDOM.render(React.createElement(SVGUse, null), document.querySelector("#main"));
}

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
SVGInline
SVGUse

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 130 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
SVGInline	1543.1 Ops/sec
SVGUse	1445.5 Ops/sec

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

Let's dive into the world of MeasureThat.net and explore what's being tested in this benchmark.

Benchmark Definition

The benchmark is designed to compare two approaches for rendering SVG images using React: SVGInline and SVGUse. The test cases use the same SVG image, but with different implementation details.

Options Compared

There are two options being compared:

SVGInline: This approach uses the React.createElement method to render the SVG image directly within a React component. The SVG code is embedded as a string within the component's JSX.
SVGUse: This approach uses the React.createElement method to render an <svg> element, and then uses the <use> element to reference the actual SVG image from a separate definition.

Pros and Cons

Here are some pros and cons of each approach:

SVGInline

Pros:

Simplifies the rendering process by embedding the SVG code directly within the React component.
May be faster since there's less overhead for referencing an external SVG file.

Cons:

The SVG code is embedded as a string, which can lead to performance issues if the SVG is large or complex.
This approach may not be suitable for larger applications where the SVG files are expected to change frequently.

SVGUse

Pros:

Separate the SVG image from the React component, making it easier to manage and update the SVG independently.
Can take advantage of caching mechanisms to improve performance.

Cons:

Requires an additional <svg> element to be rendered, which can add overhead.
The <use> element requires a reference to the actual SVG file, which may introduce latency.

Test Cases

The two test cases are identical in terms of the benchmark definition. They simply use different implementation details (SVGInline vs. SVGUse) and render the same SVG image 500 times using React's ReactDOM.render method.

Latest Benchmark Result

The latest benchmark result shows that Chrome 128, running on a Mac OS X 10.15.7 machine, renders the SVGInline approach approximately 349 iterations per second (iters/sec), while the SVGUse approach is rendered around 243 iters/sec.

Keep in mind that these results are specific to this particular benchmark and may not generalize to other scenarios or environments.

LLMs can make mistakes. Check important info.

Let's dive into the world of MeasureThat.net and explore what's being tested in this benchmark.

**Benchmark Definition**

The benchmark is designed to compare two approaches for rendering SVG images using React: `SVGInline` and `SVGUse`. The test cases use the same SVG image, but with different implementation details.

**Options Compared**

There are two options being compared:

1. **SVGInline**: This approach uses the `React.createElement` method to render the SVG image directly within a React component. The SVG code is embedded as a string within the component's JSX.
2. **SVGUse**: This approach uses the `React.createElement` method to render an `<svg>` element, and then uses the `<use>` element to reference the actual SVG image from a separate definition.

**Pros and Cons**

Here are some pros and cons of each approach:

**SVGInline**

Pros:

* Simplifies the rendering process by embedding the SVG code directly within the React component.
* May be faster since there's less overhead for referencing an external SVG file.

Cons:

* The SVG code is embedded as a string, which can lead to performance issues if the SVG is large or complex.
* This approach may not be suitable for larger applications where the SVG files are expected to change frequently.

**SVGUse**

Pros:

* Separate the SVG image from the React component, making it easier to manage and update the SVG independently.
* Can take advantage of caching mechanisms to improve performance.

Cons:

* Requires an additional `<svg>` element to be rendered, which can add overhead.
* The `<use>` element requires a reference to the actual SVG file, which may introduce latency.

**Test Cases**

**Latest Benchmark Result**

The latest benchmark result shows that Chrome 128, running on a Mac OS X 10.15.7 machine, renders the `SVGInline` approach approximately 349 iterations per second (iters/sec), while the `SVGUse` approach is rendered around 243 iters/sec.

Keep in mind that these results are specific to this particular benchmark and may not generalize to other scenarios or environments.

Related benchmarks:

React svg inline vs use 500x (version: 0)

Comparing performance of: SVGInline vs SVGUse

Created: 2 years ago by: Guest

Jump to the latest result

SVGInline

SVGUse

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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