Are you sure you are doing CSS animations? Ive recorded a little bit of perf. in Firefox and first thing that greeted me was a lot of setTimeouts and dom events.
I think CSS animations dont leave that kind of traces.
Also, this page is consuming A LOT of CPU, so i assume there is something fundamentally wrong with JS, something is running constantly in the background and is not throttled/debounced/operation is too heavy, or all of the above.
Anyway, performance tab in the browser dev tools is always good first step.
Second step would be to remove animations and see the resource usage - if its animations problem, then resource heavy usage should go away. Then you can add animations one by one and see which one is problematic - standard bisect stuff :)
At the end i would most definietly look if there is something im transitioning thats "heavy" but not elevated to its own layer (GPU accelerated) - this trick is old as hell, so i have no idea if its true nowadays ( blog.teamtreehouse.com/increase-yo... )
There were some JS issues, and fixing them sped things up! The timeouts you pointed out are however internal to react or react-transition-group, as I only set a single interval for the game loop.
The trick for GPU acceleration didn't work as expected, so I think that is no longer an issue
I ended up solving my issues by using SVG animations, which are much faster for what I need.
Thanks again for your help!
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Are you sure you are doing CSS animations? Ive recorded a little bit of perf. in Firefox and first thing that greeted me was a lot of setTimeouts and dom events.
I think CSS animations dont leave that kind of traces.
Also, this page is consuming A LOT of CPU, so i assume there is something fundamentally wrong with JS, something is running constantly in the background and is not throttled/debounced/operation is too heavy, or all of the above.
Anyway, performance tab in the browser dev tools is always good first step.
Second step would be to remove animations and see the resource usage - if its animations problem, then resource heavy usage should go away. Then you can add animations one by one and see which one is problematic - standard bisect stuff :)
At the end i would most definietly look if there is something im transitioning thats "heavy" but not elevated to its own layer (GPU accelerated) - this trick is old as hell, so i have no idea if its true nowadays ( blog.teamtreehouse.com/increase-yo... )
Great advice! Here's where it took me!
react
orreact-transition-group
, as I only set a single interval for the game loop.Thanks again for your help!