<svg xmlns="http://www.w3.org/2000/svg" width="28" height="18" viewBox="0 0 28 18" fill="none"><path d="M6.92323 0.0815023C7.60115 0.0310559 8.30045 0.000488281 8.99976 0.000488281H19.0005C19.6998 0.000488281 20.3991 0.0310559 21.077 0.0815024C23.693 0.276163 25.0009 0.373493 26.3138 1.68639C27.6267 2.99928 27.7241 4.30728 27.9187 6.92328C27.9692 7.6013 27.9998 8.30071 27.9998 9.00012C27.9998 9.69953 27.9692 10.3989 27.9187 11.077C27.7241 13.693 27.6267 15.001 26.3138 16.3139C25.0009 17.6267 23.693 17.7241 21.077 17.9187C20.3991 17.9692 19.6998 17.9998 19.0005 17.9998H8.99976C8.30045 17.9998 7.60115 17.9692 6.92323 17.9187C4.30728 17.7241 2.99931 17.6267 1.68641 16.3139C0.373517 15.001 0.276183 13.693 0.0815161 11.077C0.0310616 10.3989 0.000488281 9.69953 0.000488281 9.00012C0.000488281 8.30071 0.0310616 7.6013 0.0815162 6.92328C0.276183 4.30728 0.373517 2.99928 1.68641 1.68639C2.99931 0.373493 4.30728 0.276163 6.92323 0.0815023Z" fill="currentColor"/></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: "icon", xmlns: "http://www.w3.org/2000/svg", width: 28, height: 18, viewBox: "0 0 28 18", dangerouslySetInnerHTML: { __html: '<path d="M6.92323 0.0815023C7.60115 0.0310559 8.30045 0.000488281 8.99976 0.000488281H19.0005C19.6998 0.000488281 20.3991 0.0310559 21.077 0.0815024C23.693 0.276163 25.0009 0.373493 26.3138 1.68639C27.6267 2.99928 27.7241 4.30728 27.9187 6.92328C27.9692 7.6013 27.9998 8.30071 27.9998 9.00012C27.9998 9.69953 27.9692 10.3989 27.9187 11.077C27.7241 13.693 27.6267 15.001 26.3138 16.3139C25.0009 17.6267 23.693 17.7241 21.077 17.9187C20.3991 17.9692 19.6998 17.9998 19.0005 17.9998H8.99976C8.30045 17.9998 7.60115 17.9692 6.92323 17.9187C4.30728 17.7241 2.99931 17.6267 1.68641 16.3139C0.373517 15.001 0.276183 13.693 0.0815161 11.077C0.0310616 10.3989 0.000488281 9.69953 0.000488281 9.00012C0.000488281 8.30071 0.0310616 7.6013 0.0815162 6.92328C0.276183 4.30728 0.373517 2.99928 1.68641 1.68639C2.99931 0.373493 4.30728 0.276163 6.92323 0.0815023Z" fill="currentColor"/>' } }, );}var DivTest = function() { return React.createElement( "div", { className: "caption-medium flex h-[18px] w-[18px] items-center justify-center rounded-md text-dark-primary", width: 28, height: 18, }, "2" );}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 |
|---|---|
| SVG | |
| DIV |
| Test name | Executions per second |
|---|---|
| SVG | 643882.2 Ops/sec |
| DIV | 658254.2 Ops/sec |
Benchmark Overview
The provided benchmark measures the performance of React components, specifically a SVG inline element (SVGInline) and a simple div element (DivTest). The test assesses the rendering speed of these elements using ReactDOM.
Options Compared
There are two options being compared:
div element with a fixed class and text content.Pros and Cons of Each Approach
Pros:
Cons:
div element.Pros:
Cons:
div element, which may not leverage browser caching or optimized rendering for this specific use case.Benchmark Results
The latest benchmark results show that the Div Test outperforms the SVG Inline component, with an average of 11.5% better performance (based on executions per second). However, it's essential to note that these results may vary depending on the specific use case and browser configuration.
Device Platform and Browser
The benchmark was run on a Windows Desktop with Chrome 126 browser, using a specific User Agent string (Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36). The device platform and browser are not expected to significantly impact the performance results.
In conclusion, while both options have their pros and cons, the Div Test appears to be the faster of the two approaches in this benchmark. However, further investigation may be necessary to determine the best approach for a specific use case or project requirement.
