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

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

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

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