coderitual/bounty

optimize svg loading "especially for chrome"

ctf0 opened this issue · 6 comments

ctf0 commented

chrome is very dump when it comes to svg, as having more than 15 or 20 svg on the same page could simply render a very unpleasant experience.

so as the package atm uses svg + blurring , masking, loop the numbers list at least a couple of times b4 showing the final value, it means that any other animation that happens at the same time will hang a bit.

so we need to find a way to optimize the svg animation to minimize the jerking effect that affects chrome, some solutions could be

  • shorten the animation duration
  • disable the blurring #29
  • use font instead "one way or another will render badly at some point"
  • have a maximum value for looping, ex.
    • if the current is 5 and the next value is 100, don't play the slot machine effect and go straight to it. #45
    • if the difference between current and next were something like 10 digits or less, then make the loop to create the big list illusion.
coderitual commented

Thanks for your feedback and suggestions! I will be investigating possible options to make it more performant at certain circumstances.

  • 👍1
ctf0 commented

@coderitual btw, do you have any time frame for the new api ?

coderitual commented

I will be starting by the end of the week. Unfortunately December is quite busy for me so I would expect begining of Jan to have it ready. Ofc POC will be much faster. Also because this is an api change, all that will be part of v2. When do you need this?

  • 👍1
ctf0 commented

i wanted to use it in my prev mentioned package.
still np take ur time, but for a start can we get around the long list loop ?

coderitual commented

Yup, I can start from it.

  • ❤️1
coderitual commented

I reopen as this is part of the future optimization. Sorry I didn't improve it yet. I would leave this though to keep this in mind. Performance especially on mobiles is not satisfying.