4 ms·
Why does CSS animation consume so much CPU? I've been trying to use it in my own projects, but the fans kick in even with a single simple continuous animation.
by johnvaluk 4y ago
Why does CSS animation consume so much CPU? I've been trying to use it in my own projects, but the fans kick in even with a single simple continuous animation. Unfortunately, this (awesome!) example is no exception.
- juddgaddie 4y agoAre you running Linux or Windows? On Linux some GPU accelerated functions are disabled. chrome://gpu/ or firefox - about:support
- Sesse__ 4y agoThey don't really seem to be using a lot of CPU here? I did a quick tracing of the flying toasters screensaver, and the Chrome profiler says that a random frame I picked out used: 0.23 ms in recalc style 61 µs in pre-paint 17 µs in paint 67 µs in compositing That doesn't sound too bad to me?
- speedgoose 4y agoIt may be an issue with your machine.
- Tade0 4y agoIt's probably not the CPU, but the integrated GPU. Browsers are hardcoded to use that instead of the discrete GPU.
- underwater 4y agoIf you're really interested you can dig into `about:tracing`. It looks like the majority of the slowdown (for what it is) is the document recalculating styles for the `transform` property.