Huge Performance Issues

[mrousavy]

Hi! While I really like the drawing style of the characters and want to use them to identificate users instead of profile pictures, I cannot do so. Unfortunately the render-time of a single bighead is so high, that I simply cannot use it in production (yet). I also created a screen where the user can customize his BigHead, which renders even slower.

I am using the react-native package of this library, but since the SVGs are the same this issue should also apply to this repository.

I'm talking about noticeable delay in initial rendering (mounting) (see this demo), and generally really slow renders on re-rendering when a prop changes (see this demo). Those are definitely UI thread lags, so the vectors must be composed using expensive techniques, such as clipping, which could be optimized.

I am trying to debug why this renders so slow, as normally vector rendering should be really fast. Now to my actual question(s):

1. What could possibly be the cause of those incredibly slow renders?
2. How can I debug/perf-measure this?
3. Could someone here maybe take a look at this and help me figure this out so I can use this in production?

All kinds of help appreciated 👍

[RobertBroersma]

@mrousavy I haven't seen this issue before, and I haven't tried the react native port, but generally both the SVG's and the React trees are indeed pretty simple, so I'm not sure what could cause this. I do remember having random performance issues coming from seemingly nowhere in React Native a long time ago. I even ended up creating this issue: oblador/react-native-collapsible#123

I'm far from a React Native expert tho. I see you've created an issue in Felipe's repo as well, so hopefully he'll know more.

You mentioned clipping, which gave me an idea. When you use the mask prop the entire SVG is clipped so it fits into the background circle. Could you tried running with mask={false} ?

[mrousavy]

@RobertBroersma thanks for your reply, I'll try with mask={false} sometime this week.

I can definitely confirm that the BigHeads library is the cause of the performance issues, since removing it made my screens run butter smooth. Also, it slows down the UI thread, which is where the actual vector rendering is happening, so it's not the JS thread's fault where the individual part mapping is happening, it must be the SVGs.

I'll test this further, hopefully @felipecespedes has an idea. If you can think of anything else, please let me know! :)

[mrousavy]

@RobertBroersma I've tried using mask={false} (and showBackground={false}), but it's still slow on a modern iPhone 11, not even speaking of low end android devices.... :/ here's a new demo: https://i.imgur.com/OBzBCNi.mp4

It's most noticeable with the clothing component, see this demo: https://i.imgur.com/yE3K8Nb.mp4

[RobertBroersma]

@mrousavy Is there a way you can share an isolated reproduction?

I'm not an app developer and I can't reproduce these issues on the web, so I'm out of ideas unfortunately 🤷

[mrousavy]

@RobertBroersma I'll create a repro for you and @felipecespedes which is basically my avatar creator/editor, this might even be useful for other people. If you don't have any other ideas, thanks anyways for your help, much appreciated.

[tonychandesign]

hello, i'm also getting a massive delay when I render out the react-native component- did you ever figure this out? I've tried memoizing it too but it's the same result