<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>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 DivTest = function() { return React.createElement( "div", { className: "office", width: 190, height: 190, }, "Foo" );}ReactDOM.render(React.createElement(SVGInline, null), document.querySelector("#main"));ReactDOM.render(React.createElement(DivTest, null), document.querySelector("#main"));--enable-precise-memory-info flag.
| Test case name | Result |
|---|---|
| Inline SVG | |
| Div |
| Test name | Executions per second |
|---|---|
| Inline SVG | 1010227.5 Ops/sec |
| Div | 1285822.9 Ops/sec |
Benchmark Overview
The provided JSON represents a JavaScript benchmark that compares the performance of two approaches: using an inline SVG element and using a <div> element to render React components.
Test Cases
There are two individual test cases:
SVGInline component, which is a React component that returns an SVG element directly.DivTest component, which is a React component that returns a <div> element.Benchmark Preparation Code
The script preparation code is provided in the "Script Preparation Code" field of the benchmark definition JSON:
var SVGInline = function() {
return React.createElement(
"svg",
{ className: "office", xmlns: "http://www.w3.org/2000/svg", width: 190, height: 190, dangerouslySetInnerHTML: { __html: '<path d="...">' } }
);
};
var DivTest = function() {
return React.createElement(
"div",
{ className: "office", width: 190, height: 190 },
"Foo"
);
};
Html Preparation Code
The HTML preparation code is provided in the "Html Preparation Code" field of the benchmark definition JSON:
<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>
Latest Benchmark Result
The latest benchmark result is provided in the "Latest Benchmark Result" JSON:
[
{
"RawUAString": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36",
"Browser": "Chrome 129",
"DevicePlatform": "Desktop",
"OperatingSystem": "Mac OS X 10.15.7",
"ExecutionsPerSecond": 371484.84375,
"TestName": "Div"
},
{
"RawUAString": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36",
"Browser": "Chrome 129",
"DevicePlatform": "Desktop",
"OperatingSystem": "Mac OS X 10.15.7",
"ExecutionsPerSecond": 347322.71875,
"TestName": "Inline SVG"
}
]
Comparison
The benchmark result shows that the Div test case performed better than the Inline SVG test case, with an execution rate of approximately 86% and 14%, respectively.
Reasoning
The difference in performance can be attributed to the following factors:
<div> element is a simpler element compared to an SVG element, which requires additional processing to render.Inline SVG in older browsers.However, it's worth noting that the difference in performance is relatively small, and other factors such as JavaScript engine optimizations and caching may also play a role in determining the actual execution rates.
Overall, this benchmark suggests that using a <div> element can be faster than using an inline SVG element when rendering React components, but further optimization and testing are still needed to determine the best approach for specific use cases.
