3 ms·

Can you please try it again? the issue was not related with the component itself https://zzarcon.github.io/react-circle https://zzarcon.github.io/react-circle

Can you please try it again? the issue was not related with the component itself https://zzarcon.github.io/react-circle https://zzarcon.github.io/react-circle let me know if you still experience that issue

akerro 8y ago
It might be slightly better, but still far from performance I would expect from that component https://gfycat.com/TerribleWeeArmadillo https://gfycat.com/TerribleWeeArmadillo
- zzarcon 8y ago
  Interesting... will have a deeper look into it, if you have any idea on how to make it better you are welcome
  - akerro 8y ago
    I actually work on low latency Java backends, I have no idea how this works ;)
    - rmrfrmrf 8y ago
      > low latency Java (Does not compute)
      - akerro 8y ago
        Sure it doesnt ;) The think that myth is coming from the fact that JVM is heavy (150MB?), so it takes time to start, and hot-spot needs some iterations on a source code before it can fully apply JIT, but other that that, Java is really good.
- chuckhendo 8y ago
  Is this Edge? I can confirm poor performance in Edge, but every other browse I've looked at seems to be ok.
  - akerro 8y ago
    That's Firefox on arch linux
    - deleted 8y ago
      [deleted]
whalesalad 8y ago
If you turn off animation it's snappy. I'd recommend either killing that altogether as it definitely gives the perception of bad performance. Or... at least take into account the delta of the progress change when doing animation. For instance, if going from 5 to 10%... a slower animation is fine. If going from 0 to 100%, the animation should be much quicker.
muizelaar 8y ago
The performance is still bad. It's spending roughly 20ms doing JS work per frame. React profiles are not very easy to interpret but perhaps you're doing a lot more work per frame than you should be? Here's the profile: https://perfht.ml/2F7ohwx https://perfht.ml/2F7ohwx
- jannes 8y ago
  This file is the entire source of the component: https://github.com/zzarcon/react-circle/blob/57bb4d19df08b739017ce98c3a634ce91da0b596/src/circle.tsx https://github.com/zzarcon/react-circle/blob/57bb4d19df08b73... A lot of the work seems to be the React diffing? The only thing that changes between frames when dragging the slider is the style attribute. Furthermore, the author seems to have included the development version of React. And the author used development settings for the webpack compilation. The compiled JS is full of eval() calls.

akerro 8y ago

It might be slightly better, but still far from performance I would expect from that component https://gfycat.com/TerribleWeeArmadillo https://gfycat.com/TerribleWeeArmadillo

zzarcon 8y ago
Interesting... will have a deeper look into it, if you have any idea on how to make it better you are welcome
- akerro 8y ago
  I actually work on low latency Java backends, I have no idea how this works ;)
  - rmrfrmrf 8y ago
    > low latency Java (Does not compute)
    - akerro 8y ago
      Sure it doesnt ;) The think that myth is coming from the fact that JVM is heavy (150MB?), so it takes time to start, and hot-spot needs some iterations on a source code before it can fully apply JIT, but other that that, Java is really good.
chuckhendo 8y ago
Is this Edge? I can confirm poor performance in Edge, but every other browse I've looked at seems to be ok.
- akerro 8y ago
  That's Firefox on arch linux
  - deleted 8y ago
    [deleted]

whalesalad 8y ago

If you turn off animation it's snappy. I'd recommend either killing that altogether as it definitely gives the perception of bad performance. Or... at least take into account the delta of the progress change when doing animation. For instance, if going from 5 to 10%... a slower animation is fine. If going from 0 to 100%, the animation should be much quicker.

muizelaar 8y ago

The performance is still bad. It's spending roughly 20ms doing JS work per frame. React profiles are not very easy to interpret but perhaps you're doing a lot more work per frame than you should be? Here's the profile: https://perfht.ml/2F7ohwx https://perfht.ml/2F7ohwx

jannes 8y ago
This file is the entire source of the component: https://github.com/zzarcon/react-circle/blob/57bb4d19df08b739017ce98c3a634ce91da0b596/src/circle.tsx https://github.com/zzarcon/react-circle/blob/57bb4d19df08b73... A lot of the work seems to be the React diffing? The only thing that changes between frames when dragging the slider is the style attribute. Furthermore, the author seems to have included the development version of React. And the author used development settings for the webpack compilation. The compiled JS is full of eval() calls.