Search code examples
htmlgpucpurequestanimationframe

Does HTML5 RequestAnimationFrame run on CPU or GPU?


This answer is not easily found. I've searched through many definitive documents on RequestAnimationFrame in HTML5, and it appears that it is never specified to run in GPU. GPU is inferred at times, but references appear corollary.

So I am thinking RequestAnimationFrame is CPU, just that is never explicitly stated.

Has anyone found definitive classification on CPU Or GPU?

I suppose if it was GPU it would be everywhere. Thanks.


Solution

  • Strictly speaking, it always runs on the CPU, like all JavaScript. But it's not the part of the "CPU vs GPU" distinction that matters for animations.

    What matters is whether the kinds of operations that you start in the callback will be GPU-accelerated. This is independent from how you start them, so for GPU acceleration requestAnimationFrame does not change anything at all. If the browser is able to GPU accelerate operations, it will (e.g. if you animate opacity or transform). If it can't (e.g. if you animate width or height), then it won't.

    Still, it's better to use requestAnimationFrame over setTimeout/setInterval, because it allows the browser to choose optimal time and frequency of the callbacks (e.g. save battery by slowing down animations in invisible tabs).