mini-tokyo-3d
mini-tokyo-3d copied to clipboard
[Eco Mode] High CPU usage while train station is selected
While using the Eco Mode, the map rendering only use 14%, which is very nice !
However, when a train is selected and the bottom train-panel
shows up, the CPU usage goes (and stay) at 60%.
The issue seems to be related to this glowing animation on the station "circle" :
https://github.com/nagix/mini-tokyo-3d/blob/1866fb454cdbfc69683ec05930453d05db948319/src/train-panel.js#L99-L117
This animation querySelect and update the existing "circle" with a new SVG element on every frame.
Possible solutions:
- Slow down the animation according to the "Eco Mode" instead of every requestAnimationFrame
- Replace the animation with a more "static" design (for example a colored outline)
- Use a CSS
animation: glow 2s steps(2) infinite;
with a GPU-friendly attribute (opacity, translate3d ...)
If you don't have time, I can Pull Request you a fix.
PS: They are others animations, that are redrawn 60 times / sec (but they are less CPU intensive, so it's okay)