Slow Performance with Svelte 5

SaintPepsi commented 2 months ago

Describe the bug

When SVG elements are rendered to the page it causes a big performance slow down.

Parsing the HTML happens instantly, but then there is a presentation delay of over 500 ms

Reproduction

https://github.com/SaintPepsi/unplugin-icons-performance-issue-minimal-reproduction

System Info

System:
    OS: macOS 14.4.1
    CPU: (10) arm64 Apple M2 Pro
    Memory: 107.86 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.7.2 - /opt/homebrew/bin/node
    Yarn: 1.22.21 - ~/.nvm/versions/node/v18.16.1/bin/yarn
    npm: 10.6.0 - /opt/homebrew/bin/npm
    pnpm: 8.14.1 - ~/.nvm/versions/node/v18.16.1/bin/pnpm
    bun: 1.0.3 - ~/.bun/bin/bun
  Browsers:
    Chrome: 124.0.6367.91
    Safari: 17.4.1

Used Package Manager

npm

Validations

[X] Follow our Code of Conduct
[X] Read the Contributing Guide.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
[X] The provided reproduction is a minimal reproducible of the bug.

userquin commented 2 months ago

how can we test your repro? on my local I cannot see any performance slow down when loading the page.

Is it about running dev server or build + preview?

SaintPepsi commented 2 months ago

it seems to happen when running it in a mobile browser, like on chrome on android for example.

userquin commented 2 months ago

Can you try using passive modifier on click handler?.

Can you show performance details centered in 4s?

Can you check if lodash-es being tree shaked?

I always use the subpackage module, for example import sample from 'lodash-es/sample' instead loading from lodash-es barrel? I also include the subpackage in vite optimizedDeps.include array.

In dev or deployed app (build)?

SaintPepsi commented 2 months ago

Can you try using passive modifier on click handler?.

How do you do that?

Can you show performance details centered in 4s?

I'm not sure what you mean? Do you mean for me to screenshot the performance details for 4 seconds?

I always use the subpackage module, for example import sample from 'lodash-es/sample'

Does that make it faster?

In dev or deployed app (build)?

Both

I should be able to get to these tonight or tomorrow, will update here when I have more info

userquin commented 2 months ago

Does that make it faster?

It should, at least in dev server, check network tab (maybe the 600ms is about loading lodash-es barrel), I Will ckeck it tmr.

userquin commented 2 months ago

@SaintPepsi we've released v0.19.0 with Svelte 5 Runnes compiler, I'm going to check the performance on my mobile phone (Android 14)

userquin commented 2 months ago

About the lodash-es barrel, using your import in dev server lodash-es barrel chunk 256KB, using subpackage import + optimizedDeps.include ~12.5KB.

The passive event modifier is configured by Svelte 5 internally when safe.

userquin commented 2 months ago

Adding 25/100 children in the click handler is not cheap using any framework or even using VanillaJS, the problem seems not to be related to this repository, rather it seems like a problem with the logic in your reproduction.

SaintPepsi commented 2 months ago

@userquin I think you're right, I also posted it in svelte, also with a react example except it's not happening in react. I'll try out v0.19.0 as well thanks

SaintPepsi commented 2 months ago

It seems faster from > 500ms to 136ms/230ms:

unplugin / unplugin-icons