0

I have a huge SVG which has lots of graphical elements, on mouse wheel zoom event gets triggered which re-paints the whole SVG. With some profiling I could break down the time taken in such event,

  • Calculations needed to transform the SVG are taking 1-2ms.
  • Upon applying the transform, the paint operation is taking 500ms-1.5sec(very sluggish user experience).

As I understand, the paint operation would depend on the render tree of the SVG/HTML which is quite big in this case. I thought of trying the following ways to improve the user experience

  1. Use 'debouncing' so that I will coalesce mulitple scroll events into one signal within a given interval.
  2. Possibly use 'requestAnimationFrame' with 'debouncing'.
  3. Look for ways to optimize the render tree of the SVG although I feel this is difficult in my case because of other constraints.

Are these the right ways or am I moving in the wrong direction? What other techniques could be used for a smoother user experience in such cases when re-painting is inevitable?

themanwhosoldtheworld
  • 560
  • 4
  • 23
  • It would be useful to show a minimal example that could be tested and played with, eg on a jsfiddle or jsbin even if the svg is quite big. Its hard to spot optimisations without seeing anything. Its not clear if the transform is on one element, or lots of elements for example (and if this could be reduced). Also if it could be done via css rather than svg attributes. – Ian Nov 14 '15 at 18:13
  • You should definitely debounce the scroll events, whether via `request animationFrame` or otherwise. – Stephen Thomas Nov 14 '15 at 18:52
  • @Ian zoom event zooms the entire view of SVG around the mouse wheel point. The transform is set on the top 'g' element(viewport) as an attribute and not on lots of elements and it re-paints the whole view. – themanwhosoldtheworld Nov 15 '15 at 03:57

0 Answers0