3 ms·
Given there's only a single svg element changing I'm not exactly sure you could have done it better. It might just be that the ease-out transitions for the str
by btcindivist 8y ago
Given there's only a single svg element changing I'm not exactly sure you could have done it better.
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.
- kuschku 8y agoUse 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.
- btcindivist 8y agoBut there's only 3-4 DOM elements. I'm pretty sure doing this in canvas is not as trivial as this.
- kuschku 8y agoOf course it’s not as trivial. But you can control the animation much better, and you can have much better performance.
- vilvadot 8y agoYeah, 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 :)