Benchmark: React svg inline vs use 500x Phosphor Bell

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="Bell" viewBox="0 0 16 16">
        <path d="M6 11.5C5.86739 11.5 5.74021 11.5527 5.64645 11.6464C5.55268 11.7402 5.5 11.8674 5.5 12V12.5C5.49987 13.8749 6.62514 15.0001 8 15C8.66281 15 9.29903 14.7365 9.7677 14.2678C10.2364 13.7991 10.5 13.1628 10.5 12.5V12C10.5 11.8674 10.4473 11.7402 10.3536 11.6464C10.2598 11.5527 10.1326 11.5 10 11.5C9.86739 11.5 9.74021 11.5527 9.64645 11.6464C9.55268 11.7402 9.5 11.8674 9.5 12V12.5C9.50001 12.898 9.34212 13.2793 9.06067 13.5607C8.77926 13.8421 8.398 14 8 14C7.16564 14.0001 6.49992 13.3344 6.5 12.5V12C6.5 11.8674 6.44732 11.7402 6.35355 11.6464C6.25978 11.5527 6.13261 11.5 6 11.5Z M8.03394 1.50012C5.26871 1.48474 3.00893 3.73483 3.01245 6.5V7.00014C3.01245 9.16781 2.56115 10.3731 2.19849 10.9995C2.19857 10.9994 2.1984 10.9997 2.19849 10.9995C2.11088 11.1513 2.06437 11.324 2.06421 11.4992C2.06387 12.0445 2.51528 12.498 3.06055 12.5C3.06116 12.5001 3.06177 12.5001 3.06238 12.5002H12.9374C12.938 12.5001 12.9386 12.5001 12.9392 12.5C13.1144 12.4994 13.2863 12.4529 13.4377 12.3649C13.9096 12.0911 14.0746 11.4723 13.8016 10.9999C13.8017 11.0001 13.8016 10.9998 13.8016 10.9999C13.4389 10.3735 12.9874 9.16781 12.9874 7.00015V6.5563C12.9874 3.80889 10.7849 1.52098 8.03503 1.50015C8.03466 1.50015 8.03431 1.50012 8.03394 1.50012ZM8.02734 2.5C8.02716 2.5 8.02753 2.5 8.02734 2.5C10.2272 2.51694 11.9874 4.34136 11.9874 6.55628V7.00012C11.9874 9.30695 12.4736 10.7013 12.9358 11.5C12.9361 11.499 12.9383 11.4986 12.9358 11.5L3.06434 11.5001C3.06426 11.5003 3.06443 11.5 3.06434 11.5001C3.52659 10.7015 4.01246 9.30699 4.01246 7.00013V6.50013C4.01242 6.50041 4.0125 6.49985 4.01246 6.50013C4.00929 4.27789 5.80529 2.48824 8.02734 2.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",
    { xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, viewBox: "0 0 16 16"},
    React.createElement("path", {d: "M6 11.5C5.86739 11.5 5.74021 11.5527 5.64645 11.6464C5.55268 11.7402 5.5 11.8674 5.5 12V12.5C5.49987 13.8749 6.62514 15.0001 8 15C8.66281 15 9.29903 14.7365 9.7677 14.2678C10.2364 13.7991 10.5 13.1628 10.5 12.5V12C10.5 11.8674 10.4473 11.7402 10.3536 11.6464C10.2598 11.5527 10.1326 11.5 10 11.5C9.86739 11.5 9.74021 11.5527 9.64645 11.6464C9.55268 11.7402 9.5 11.8674 9.5 12V12.5C9.50001 12.898 9.34212 13.2793 9.06067 13.5607C8.77926 13.8421 8.398 14 8 14C7.16564 14.0001 6.49992 13.3344 6.5 12.5V12C6.5 11.8674 6.44732 11.7402 6.35355 11.6464C6.25978 11.5527 6.13261 11.5 6 11.5Z M8.03394 1.50012C5.26871 1.48474 3.00893 3.73483 3.01245 6.5V7.00014C3.01245 9.16781 2.56115 10.3731 2.19849 10.9995C2.19857 10.9994 2.1984 10.9997 2.19849 10.9995C2.11088 11.1513 2.06437 11.324 2.06421 11.4992C2.06387 12.0445 2.51528 12.498 3.06055 12.5C3.06116 12.5001 3.06177 12.5001 3.06238 12.5002H12.9374C12.938 12.5001 12.9386 12.5001 12.9392 12.5C13.1144 12.4994 13.2863 12.4529 13.4377 12.3649C13.9096 12.0911 14.0746 11.4723 13.8016 10.9999C13.8017 11.0001 13.8016 10.9998 13.8016 10.9999C13.4389 10.3735 12.9874 9.16781 12.9874 7.00015V6.5563C12.9874 3.80889 10.7849 1.52098 8.03503 1.50015C8.03466 1.50015 8.03431 1.50012 8.03394 1.50012ZM8.02734 2.5C8.02716 2.5 8.02753 2.5 8.02734 2.5C10.2272 2.51694 11.9874 4.34136 11.9874 6.55628V7.00012C11.9874 9.30695 12.4736 10.7013 12.9358 11.5C12.9361 11.499 12.9383 11.4986 12.9358 11.5L3.06434 11.5001C3.06426 11.5003 3.06443 11.5 3.06434 11.5001C3.52659 10.7015 4.01246 9.30699 4.01246 7.00013V6.50013C4.01242 6.50041 4.0125 6.49985 4.01246 6.50013C4.00929 4.27789 5.80529 2.48824 8.02734 2.5Z"}),
  );
}
    
var SVGInlineDangerous = function() {
  return React.createElement(
    "svg",
    { xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, viewBox: "0 0 16 16",
     dangerouslySetInnerHTML: {
       __html: '<path d="M6 11.5C5.86739 11.5 5.74021 11.5527 5.64645 11.6464C5.55268 11.7402 5.5 11.8674 5.5 12V12.5C5.49987 13.8749 6.62514 15.0001 8 15C8.66281 15 9.29903 14.7365 9.7677 14.2678C10.2364 13.7991 10.5 13.1628 10.5 12.5V12C10.5 11.8674 10.4473 11.7402 10.3536 11.6464C10.2598 11.5527 10.1326 11.5 10 11.5C9.86739 11.5 9.74021 11.5527 9.64645 11.6464C9.55268 11.7402 9.5 11.8674 9.5 12V12.5C9.50001 12.898 9.34212 13.2793 9.06067 13.5607C8.77926 13.8421 8.398 14 8 14C7.16564 14.0001 6.49992 13.3344 6.5 12.5V12C6.5 11.8674 6.44732 11.7402 6.35355 11.6464C6.25978 11.5527 6.13261 11.5 6 11.5Z M8.03394 1.50012C5.26871 1.48474 3.00893 3.73483 3.01245 6.5V7.00014C3.01245 9.16781 2.56115 10.3731 2.19849 10.9995C2.19857 10.9994 2.1984 10.9997 2.19849 10.9995C2.11088 11.1513 2.06437 11.324 2.06421 11.4992C2.06387 12.0445 2.51528 12.498 3.06055 12.5C3.06116 12.5001 3.06177 12.5001 3.06238 12.5002H12.9374C12.938 12.5001 12.9386 12.5001 12.9392 12.5C13.1144 12.4994 13.2863 12.4529 13.4377 12.3649C13.9096 12.0911 14.0746 11.4723 13.8016 10.9999C13.8017 11.0001 13.8016 10.9998 13.8016 10.9999C13.4389 10.3735 12.9874 9.16781 12.9874 7.00015V6.5563C12.9874 3.80889 10.7849 1.52098 8.03503 1.50015C8.03466 1.50015 8.03431 1.50012 8.03394 1.50012ZM8.02734 2.5C8.02716 2.5 8.02753 2.5 8.02734 2.5C10.2272 2.51694 11.9874 4.34136 11.9874 6.55628V7.00012C11.9874 9.30695 12.4736 10.7013 12.9358 11.5C12.9361 11.499 12.9383 11.4986 12.9358 11.5L3.06434 11.5001C3.06426 11.5003 3.06443 11.5 3.06434 11.5001C3.52659 10.7015 4.01246 9.30699 4.01246 7.00013V6.50013C4.01242 6.50041 4.0125 6.49985 4.01246 6.50013C4.00929 4.27789 5.80529 2.48824 8.02734 2.5Z"></path>'
     }
    },
  );
}

var SVGUse = function() {
	return React.createElement(
      "svg",
      { xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, viewBox: "0 0 16 16" },
      React.createElement("use", { xlinkHref: '#Bell' })
    );
}

Tests:

SVGInline
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")); }
SVGInlineDangerous
for(i=0;i<500;i++){ ReactDOM.render(React.createElement(SVGInlineDangerous, null), document.querySelector("#main")); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
SVGInline
SVGUse
SVGInlineDangerous

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/110.0.0.0 Safari/537.36

Browser/OS: Chrome 110 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
SVGInline	1366.6 Ops/sec
SVGUse	1375.6 Ops/sec
SVGInlineDangerous	1524.2 Ops/sec

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

LLMs can make mistakes. Check important info.

It seems like we're in the midst of analyzing benchmark results for React components, specifically `SVGInline`, `SVGUse`, and `SVGInlineDangerous`.

Let's break down the key findings:

1. **Browser**: All three tests are running on Chrome 110.
2. **Device Platform**: The tests are being run on a Macintosh with Intel processor, which is running macOS 10.15.7.
3. **Operating System**: This is clearly stated as macOS 10.15.7.

Now, let's look at the benchmark results:

1. **SVGInlineDangerous**:
	* Average executions per second (AIPS): 1524.1827392578125
	* This indicates that `SVGInlineDangerous` performs relatively well in this scenario.
2. **SVGUse**:
	* AIPS: 1375.572509765625
	* Although lower than `SVGInlineDangerous`, `SVGUse` is still performing reasonably well.
3. **SVGInline**:
	* AIPS: 1366.64453125
	* Slightly slower than `SVGUse`, but still competitive.

Based on these results, it appears that:

* `SVGInlineDangerous` has the highest AIPS, indicating it's the fastest performer in this scenario.
* `SVGUse` is slightly faster than `SVGInline`.
* All three components are performing well within a similar performance range.

Keep in mind that these results are specific to this particular test environment and might not generalize across other browsers or platforms.

Related benchmarks:

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

Comparing performance of: SVGInline vs SVGUse vs SVGInlineDangerous

Created: one year ago by: Guest

Jump to the latest result

SVGInline

SVGUse

SVGInlineDangerous

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