High CPU usage with svg elements

[keyurshah]

Hello,

I'm using Alpine on a category page with multiple instances of alpine. I'm encountering very high CPU usage on the page.

In testing out different parts of the site, it seems that the issue is svg loaders that are inside each alpine instance. Even with one instance of the svg, the cpu starts going up. With multiple instances, it escalates the CPU considerably. This is with Chrome on Windows.

On my computer

• without the SVG, it is around 0-1% CPU usage.
• with the SVG, it is around 25% CPU usage.

This seems to be a mutation observer issue with svg and I don't think there is a fix.

FortAwesome/Font-Awesome#14368

If this is the case, should the documentation indicate a warning for using svg's?

This is the svg in question

<div class=" spinner mx-auto" id="loading-spinner" x-show="loading" style="display: none;">
          
<!--?xml version="1.0" encoding="utf-8"?-->
<svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; display: block; shape-rendering: auto;" width="18px" height="18px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
    <g transform="translate(80,50)">
        <g transform="rotate(0)">
            <circle class="w-2 h-2 bg-white fill-current" cx="0" cy="0" r="4" fill-opacity="1" transform="scale(1.22227 1.22227)">
                <animateTransform attributeName="transform" type="scale" begin="-0.875s" values="1.5 1.5;1 1" keyTimes="0;1" dur="1s" repeatCount="indefinite"></animateTransform>
                <animate attributeName="fill-opacity" keyTimes="0;1" dur="1s" repeatCount="indefinite" values="1;0" begin="-0.875s"></animate>
            </circle>
        </g>
    </g><g transform="translate(71.21320343559643,71.21320343559643)">
    <g transform="rotate(45)">
        <circle class="w-2 h-2 bg-white fill-current" cx="0" cy="0" r="4" fill-opacity="0.875" transform="scale(1.28477 1.28477)">
            <animateTransform attributeName="transform" type="scale" begin="-0.75s" values="1.5 1.5;1 1" keyTimes="0;1" dur="1s" repeatCount="indefinite"></animateTransform>
            <animate attributeName="fill-opacity" keyTimes="0;1" dur="1s" repeatCount="indefinite" values="1;0" begin="-0.75s"></animate>
        </circle>
    </g>
</g><g transform="translate(50,80)">
    <g transform="rotate(90)">
        <circle class="w-2 h-2 bg-white fill-current" cx="0" cy="0" r="4" fill-opacity="0.75" transform="scale(1.34727 1.34727)">
            <animateTransform attributeName="transform" type="scale" begin="-0.625s" values="1.5 1.5;1 1" keyTimes="0;1" dur="1s" repeatCount="indefinite"></animateTransform>
            <animate attributeName="fill-opacity" keyTimes="0;1" dur="1s" repeatCount="indefinite" values="1;0" begin="-0.625s"></animate>
        </circle>
    </g>
</g><g transform="translate(28.786796564403577,71.21320343559643)">
    <g transform="rotate(135)">
        <circle class="w-2 h-2 bg-white fill-current" cx="0" cy="0" r="4" fill-opacity="0.625" transform="scale(1.40977 1.40977)">
            <animateTransform attributeName="transform" type="scale" begin="-0.5s" values="1.5 1.5;1 1" keyTimes="0;1" dur="1s" repeatCount="indefinite"></animateTransform>
            <animate attributeName="fill-opacity" keyTimes="0;1" dur="1s" repeatCount="indefinite" values="1;0" begin="-0.5s"></animate>
        </circle>
    </g>
</g><g transform="translate(20,50.00000000000001)">
    <g transform="rotate(180)">
        <circle class="w-2 h-2 bg-white fill-current" cx="0" cy="0" r="4" fill-opacity="0.5" transform="scale(1.47227 1.47227)">
            <animateTransform attributeName="transform" type="scale" begin="-0.375s" values="1.5 1.5;1 1" keyTimes="0;1" dur="1s" repeatCount="indefinite"></animateTransform>
            <animate attributeName="fill-opacity" keyTimes="0;1" dur="1s" repeatCount="indefinite" values="1;0" begin="-0.375s"></animate>
        </circle>
    </g>
</g><g transform="translate(28.78679656440357,28.786796564403577)">
    <g transform="rotate(225)">
        <circle class="w-2 h-2 bg-white fill-current" cx="0" cy="0" r="4" fill-opacity="0.375" transform="scale(1.03477 1.03477)">
            <animateTransform attributeName="transform" type="scale" begin="-0.25s" values="1.5 1.5;1 1" keyTimes="0;1" dur="1s" repeatCount="indefinite"></animateTransform>
            <animate attributeName="fill-opacity" keyTimes="0;1" dur="1s" repeatCount="indefinite" values="1;0" begin="-0.25s"></animate>
        </circle>
    </g>
</g><g transform="translate(49.99999999999999,20)">
    <g transform="rotate(270)">
        <circle class="w-2 h-2 bg-white fill-current" cx="0" cy="0" r="4" fill-opacity="0.25" transform="scale(1.09727 1.09727)">
            <animateTransform attributeName="transform" type="scale" begin="-0.125s" values="1.5 1.5;1 1" keyTimes="0;1" dur="1s" repeatCount="indefinite"></animateTransform>
            <animate attributeName="fill-opacity" keyTimes="0;1" dur="1s" repeatCount="indefinite" values="1;0" begin="-0.125s"></animate>
        </circle>
    </g>
</g><g transform="translate(71.21320343559643,28.78679656440357)">
    <g transform="rotate(315)">
        <circle class="w-2 h-2 bg-white fill-current" cx="0" cy="0" r="4" fill-opacity="0.125" transform="scale(1.15977 1.15977)">
            <animateTransform attributeName="transform" type="scale" begin="0s" values="1.5 1.5;1 1" keyTimes="0;1" dur="1s" repeatCount="indefinite"></animateTransform>
            <animate attributeName="fill-opacity" keyTimes="0;1" dur="1s" repeatCount="indefinite" values="1;0" begin="0s"></animate>
        </circle>
    </g>
</g>
    <!-- [ldio] generated by https://loading.io/ --></svg>    
      </div>

Thanks!

[smbdelse]

I'm wondering if you can bypass it by using svg's <use></use> element, and defining svg somewhere outside of components scope?

[keyurshah]

thanks for the input. i'm not familiar with that usage but I will check it out and see if it helps