Some browsers support requestAnimationFrame
, so why not use it? After all, it's been supported since Google Chrome 10. Despite that, jQuery does not seem to be using it. I've found a bug report about it, but no real explanation was given? I'm sure the jQuery people have their reasons, though.
Why wouldn't they use this awesome API?
requestAnimationFrame is a bit trickier to get working then setInterval , but it is so much more performant and accurate that the small amount of extra effort is worth it.
To optimize system and browser resources, it is recommended to use requestAnimationFrame , which requests the browser to execute the code during the next repaint cycle. This allows the system to optimize resources and frame-rate to reduce unnecessary reflow/repaint calls.
As now you know that the rAF is a Web API, that means the callback will be called asynchronously. Unlike setInterval , requestAnimationFrame does not accept delay argument, instead, it only calls the callback function when the browser is ready to perform the next paint operation.
React doesn't currently use requestAnimationFrame to do DOM updates (as we call it, the "batching strategy"). The batching strategy is injectible though so it's possible to use something else.
In ticket #9381 you can read why they stopped using requestionAnimationFrame
after some time.
To summarize, problems were that animations didn't run (browsers try to reduce CPU load) when window didn't have focus, which is OK if the window is hidden, but not if it is visible, just out of the focus. Furthermore, animation queues piled up and after window regained focus, things went berserk. This would require ugly changes in the code and/or changes how people add things to the animation queue. So it was decided that support is removed until there is some better way to do this.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With