Re:Show HN: ReactCircle – Renders SVG circle and percentage
by kuschku on Monday April 23, 2018 @10:02AM
(#16903449)
Use a canvas and render the component directly? You’re rendering a circular progress bar, that should be easily doable in microseconds if not nanoseconds. There’s no need to use the overly bloated DOM for everything.
I suggest taking a look at Android’s views or even Flutter.
Re:Show HN: ReactCircle – Renders SVG circle and percentage
by btcindivist on Monday April 23, 2018 @10:54AM
(#16903894)
But there's only 3-4 DOM elements. I'm pretty sure doing this in canvas is not as trivial as this.
Re:Show HN: ReactCircle – Renders SVG circle and percentage
by kuschku on Monday April 23, 2018 @11:44AM
(#16904413)
Of course it’s not as trivial. But you can control the animation much better, and you can have much better performance.
Re:Show HN: ReactCircle – Renders SVG circle and percentage
by vilvadot on Monday April 23, 2018 @10:07AM
(#16903476)
Yeah, more than likely the only problematic part is the transition animation. The main problem was another component breaking the performance in the examples page, not the component itself. Should be fixed now :)
It might just be that the ease-out transitions for the stroke are not efficiently implemented in whatever browser you're using.
If you've tried and check out and understand the code you'd see there's so little being done in JS that this stuff is surely not the bottleneck.