Ad

Performance Issue For Inline ALL Styles In React.jS?

- 1 answer

For example, I have a ES6 Harmony JSX snippet like this:

export class Curve extends Component {
    render() {
        return (
            <svg xmlns="http://www.w3.org/2000/svg" width={216} height={232}
                 viewBox="0 0 216 232">
                <defs>
                    <pattern id="a"  width={34} height={34} patternUnits="userSpaceOnUse"
                             viewBox="0 0 34 34">
                        <rect width={34} height={34} style={{fill: 'none'}}/>
                        <line x1="10.55" y1="-177.3" x2="-174.05" y2="7.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="27.55" y1="-177.3" x2="-157.05" y2="7.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="44.55" y1="-177.3" x2="-140.05" y2="7.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="61.55" y1="-177.3" x2="-123.05" y2="7.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="78.55" y1="-177.3" x2="-106.05" y2="7.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="95.55" y1="-177.3" x2="-89.05" y2="7.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="112.55" y1="-177.3" x2="-72.05" y2="7.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="129.55" y1="-177.3" x2="-55.05" y2="7.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="146.55" y1="-177.3" x2="-38.05" y2="7.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="163.55" y1="-177.3" x2="-21.05" y2="7.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="180.55" y1="-177.3" x2="-4.05" y2="7.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="197.55" y1="-177.3" x2="12.95" y2="7.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="214.55" y1="-177.3" x2="29.95" y2="7.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="2.05" y1="-160.3" x2="-182.55" y2="24.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="19.05" y1="-160.3" x2="-165.55" y2="24.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="36.05" y1="-160.3" x2="-148.55" y2="24.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="53.05" y1="-160.3" x2="-131.55" y2="24.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="70.05" y1="-160.3" x2="-114.55" y2="24.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="87.05" y1="-160.3" x2="-97.55" y2="24.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="104.05" y1="-160.3" x2="-80.55" y2="24.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="121.05" y1="-160.3" x2="-63.55" y2="24.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="138.05" y1="-160.3" x2="-46.55" y2="24.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="155.05" y1="-160.3" x2="-29.55" y2="24.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="172.05" y1="-160.3" x2="-12.55" y2="24.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="189.05" y1="-160.3" x2="4.45" y2="24.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="206.05" y1="-160.3" x2="21.45" y2="24.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="10.55" y1="-143.3" x2="-174.05" y2="41.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="27.55" y1="-143.3" x2="-157.05" y2="41.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="44.55" y1="-143.3" x2="-140.05" y2="41.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="61.55" y1="-143.3" x2="-123.05" y2="41.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="78.55" y1="-143.3" x2="-106.05" y2="41.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="95.55" y1="-143.3" x2="-89.05" y2="41.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="112.55" y1="-143.3" x2="-72.05" y2="41.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="129.55" y1="-143.3" x2="-55.05" y2="41.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="146.55" y1="-143.3" x2="-38.05" y2="41.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="163.55" y1="-143.3" x2="-21.05" y2="41.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="180.55" y1="-143.3" x2="-4.05" y2="41.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="197.55" y1="-143.3" x2="12.95" y2="41.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="214.55" y1="-143.3" x2="29.95" y2="41.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="2.05" y1="-126.3" x2="-182.55" y2="58.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="19.05" y1="-126.3" x2="-165.55" y2="58.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="36.05" y1="-126.3" x2="-148.55" y2="58.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="53.05" y1="-126.3" x2="-131.55" y2="58.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="70.05" y1="-126.3" x2="-114.55" y2="58.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="87.05" y1="-126.3" x2="-97.55" y2="58.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="104.05" y1="-126.3" x2="-80.55" y2="58.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="121.05" y1="-126.3" x2="-63.55" y2="58.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="138.05" y1="-126.3" x2="-46.55" y2="58.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="155.05" y1="-126.3" x2="-29.55" y2="58.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="172.05" y1="-126.3" x2="-12.55" y2="58.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="189.05" y1="-126.3" x2="4.45" y2="58.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="206.05" y1="-126.3" x2="21.45" y2="58.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="10.55" y1="-109.3" x2="-174.05" y2="75.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="27.55" y1="-109.3" x2="-157.05" y2="75.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="44.55" y1="-109.3" x2="-140.05" y2="75.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="61.55" y1="-109.3" x2="-123.05" y2="75.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="78.55" y1="-109.3" x2="-106.05" y2="75.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="95.55" y1="-109.3" x2="-89.05" y2="75.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="112.55" y1="-109.3" x2="-72.05" y2="75.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="129.55" y1="-109.3" x2="-55.05" y2="75.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="146.55" y1="-109.3" x2="-38.05" y2="75.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="163.55" y1="-109.3" x2="-21.05" y2="75.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="180.55" y1="-109.3" x2="-4.05" y2="75.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="197.55" y1="-109.3" x2="12.95" y2="75.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="214.55" y1="-109.3" x2="29.95" y2="75.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="2.05" y1="-92.3" x2="-182.55" y2="92.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="19.05" y1="-92.3" x2="-165.55" y2="92.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="36.05" y1="-92.3" x2="-148.55" y2="92.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="53.05" y1="-92.3" x2="-131.55" y2="92.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="70.05" y1="-92.3" x2="-114.55" y2="92.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="87.05" y1="-92.3" x2="-97.55" y2="92.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="104.05" y1="-92.3" x2="-80.55" y2="92.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="121.05" y1="-92.3" x2="-63.55" y2="92.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="138.05" y1="-92.3" x2="-46.55" y2="92.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="155.05" y1="-92.3" x2="-29.55" y2="92.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="172.05" y1="-92.3" x2="-12.55" y2="92.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="189.05" y1="-92.3" x2="4.45" y2="92.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="206.05" y1="-92.3" x2="21.45" y2="92.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="10.55" y1="-75.3" x2="-174.05" y2="109.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="27.55" y1="-75.3" x2="-157.05" y2="109.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="44.55" y1="-75.3" x2="-140.05" y2="109.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="61.55" y1="-75.3" x2="-123.05" y2="109.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="78.55" y1="-75.3" x2="-106.05" y2="109.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="95.55" y1="-75.3" x2="-89.05" y2="109.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="112.55" y1="-75.3" x2="-72.05" y2="109.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="129.55" y1="-75.3" x2="-55.05" y2="109.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="146.55" y1="-75.3" x2="-38.05" y2="109.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="163.55" y1="-75.3" x2="-21.05" y2="109.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="180.55" y1="-75.3" x2="-4.05" y2="109.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="197.55" y1="-75.3" x2="12.95" y2="109.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="214.55" y1="-75.3" x2="29.95" y2="109.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="2.05" y1="-58.3" x2="-182.55" y2="126.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="19.05" y1="-58.3" x2="-165.55" y2="126.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="36.05" y1="-58.3" x2="-148.55" y2="126.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="53.05" y1="-58.3" x2="-131.55" y2="126.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="70.05" y1="-58.3" x2="-114.55" y2="126.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="87.05" y1="-58.3" x2="-97.55" y2="126.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="104.05" y1="-58.3" x2="-80.55" y2="126.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="121.05" y1="-58.3" x2="-63.55" y2="126.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="138.05" y1="-58.3" x2="-46.55" y2="126.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="155.05" y1="-58.3" x2="-29.55" y2="126.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="172.05" y1="-58.3" x2="-12.55" y2="126.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="189.05" y1="-58.3" x2="4.45" y2="126.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="206.05" y1="-58.3" x2="21.45" y2="126.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="10.55" y1="-41.3" x2="-174.05" y2="143.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="27.55" y1="-41.3" x2="-157.05" y2="143.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="44.55" y1="-41.3" x2="-140.05" y2="143.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="61.55" y1="-41.3" x2="-123.05" y2="143.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="78.55" y1="-41.3" x2="-106.05" y2="143.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="95.55" y1="-41.3" x2="-89.05" y2="143.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="112.55" y1="-41.3" x2="-72.05" y2="143.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>
                        <line x1="129.55" y1="-41.3" x2="-55.05" y2="143.3"
                              style={{fill: 'none', stroke: '#ffff5b', strokeMiterlimit: 10}}/>

                    </pattern>
                </defs>
                <title>g-force</title>
                <path d="M1324,1663a108,108,0,1,0,108,108V1663H1324Zm0,200a92,92,0,1,1,92-92A92,92,0,0,1,1324,1863Z"
                      transform="translate(-1216 -1647)" style={{fill: '#130726', opacity: '0.7'}}/>
                <g>
                    <path d="M1346,1647h74a12,12,0,0,1,12,12v0a12,12,0,0,1-12,12h-74a0,0,0,0,1,0,0v-24a0,0,0,0,1,0,0Z"
                          transform="translate(1562 1671) rotate(-180)" style={{fill: '#100028'}}/>
                    <text transform="translate(144.51 18)"
                          style={{fontSize: 16, fill: '#fff', fontFamily: 'Whitney', fontWeight: 700}}>GFORCE</text>
                </g>
                <path
                    d="M1324,1679a92,92,0,1,0,92,92A92,92,0,0,0,1324,1679Zm0,160a68,68,0,1,1,68-68A68,68,0,0,1,1324,1839Z"
                    transform="translate(-1216 -1647)" style={{fill: '#130726', opacity: '0.5'}}/>
                <circle cx={108} cy={124} r={68} style={{fill: '#130726', opacity: '0.7'}}/>
                <g style={{opacity: '0.7'}}>
                    <path
                        d="M1324,1680a91,91,0,1,1-91,91,91.1,91.1,0,0,1,91-91m0-1a92,92,0,1,0,92,92,92,92,0,0,0-92-92h0Z"
                        transform="translate(-1216 -1647)" style={{fill: '#fff'}}/>
                </g>
                <g>
                    <rect x={32} y={116} width={16} height={16} rx={8} ry={8} style={{fill: '#100028'}}/>
                    <text transform="translate(34.97 127.9)"
                          style={{fontSize: 12, fill: '#fff', fontFamily: 'Tungsten'}}>0.5
                    </text>
                </g>
                <path
                    d="M1342.88,1721.48c27.35,10.43,49.32,53.09,41.85,72.68s-52.27,36.79-79.62,26.37A53,53,0,0,1,1342.88,1721.48Z"
                    transform="translate(-1216 -1647)"
                    style={{stroke: '#ffff0b', strokeMiterlimit: 10, fill: 'url(#a)'}}/>
                <circle cx={108} cy={124} r={44} style={{fill: '#100028'}}/>
                <circle cx={168} cy={150} r={6} style={{fill: '#ffff15'}}/>
                <g>
                    <rect x={8} y={116} width={16} height={16} rx={8} ry={8} style={{fill: '#100028'}}/>
                    <text transform="translate(11.84 127.9)"
                          style={{fontSize: 12, fill: '#fff', fontFamily: 'Tungsten'}}>1.0
                    </text>
                </g>
                <g>
                    <path d="M1311,1761.66h-2.22v-1.38H1311V1758h1.44v2.28h2.22v1.38h-2.22v2.28H1311v-2.28Z"
                          transform="translate(-1216 -1647)" style={{fill: '#fff'}}/>
                    <text transform="translate(101.55 119.93)"
                          style={{fontSize: 28, fill: '#fff', fontFamily: 'Tungsten'}}>0
                        .
                        46
                    </text>
                    <text transform="translate(79 119.93)"
                          style={{fontSize: 18, fill: '#ffff15', fontFamily: 'Tungsten'}}>X
                    </text>
                    <text transform="translate(79 147)" style={{fontSize: 18, fill: '#ffff15', fontFamily: 'Tungsten'}}>
                        Y
                    </text>
                    <text transform="translate(101.55 147.4)"
                          style={{fontSize: 28, fill: '#fff', fontFamily: 'Tungsten'}}>0.68
                    </text>
                    <rect x="92.74" y="118.55" width="5.87" height="1.38" style={{fill: '#5a5368'}}/>
                    <path d="M1311,1789.12h-2.22v-1.38H1311v-2.28h1.44v2.28h2.22v1.38h-2.22v2.28H1311v-2.28Z"
                          transform="translate(-1216 -1647)" style={{fill: '#fff'}}/>
                    <rect x="92.74" y="146.02" width="5.87" height="1.38" style={{fill: '#5a5368'}}/>
                </g>
            </svg>
        )
    }
}

As can be seen, A LOT of JSX inline style is used. And the compiling stage is quite slow using Webpack. Apart from compiling, I was just wondering whether there will be a big overhead for rendering if I use JSX inline style everywhere.

Does anyone have ideas about this? Thanks!

Ad

Answer

On some UI blocks inlining CSS is considered good. Usually called critical CSS, can increase the perceived performance of your app.

Inlining all CSS is not that good of an idea. You're potentially sending lots of duplicate data. And you'll be unable to make use of caching those resources/data.

Duplicate data in HTML is mostly negated by g-zipping, and if you're caching the entire html-page itself, can negate the problem of not caching the CSS seperately a bit. But not entirely, CSS will be re-downloaded on every page.

Why use so many inline styles anyway? It seems like you could just create about 4 css classes and apply them as className to the elements?

Ad
source: stackoverflow.com
Ad