search

msand / zoomable-svg

Pinch to pan-n-zoom react-native-svg components using a render prop.
38 stars 14 forks source link

Performance problem with large number of item #4

Open shuijinliuxi opened 6 years ago

shuijinliuxi commented 6 years ago

I use the zoomable-svg to draw many item with pan and zoom, but it has bad performance. This is the gif:

gif.gif

yuoppp commented 6 years ago

Facing the same issue with 1000+ elements

yuoppp commented 6 years ago

Do not use "opacity". Use fill="rgba(r, g, b, a)" instead. Saved me 4 seconds of rendering. But still 1sec render is unacceptable for my app.

msand commented 6 years ago

Is it fast without zoomable-svg? Can you measure the difference with and without? I suspect zoomable-svg contributes very little to any performance issues. You should probably look into refactoring out your content to a separate component and using shouldComponentUpdate. Such that only the updated transform needs to reconciled and sent over the bridge to the native side. Otherwise you might need to look into culling your render trees, such that you only include elements which should actually be visible in the currently visible area, to limit any redundant or output/side-effect free parts of the computation.

yuoppp commented 6 years ago

I'm using react-native-svg-pan-zoom, which transforms the view around the svg instead of the svg itself.

MozilaIP commented 5 years ago

@yuoppp is react-native-svg-pan-zoom performs faster than zoomable-svg in such cases?

msand commented 5 years ago

If your content doesn't change, or you don't care about the image getting pixelated when zoomed in, then it'll certainly be faster to transform the bitmap rather than rerendering the vector data.