Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

setTimeOut yields 233 fps while requestAnimationFrame yields 61

I did some tests on Chrome and requestAnimationFrame yielded 61 fps while setTimeOut( callback, 0 ), yielded 233 fps.
If one would like to have more than 61 fps (which I'm not sure what for) but wouldn't it be better to render with setTimeOut and just use requestAnimationFrame to detect when the window lost focus and then stop the timeouts until the focus returns?

And a side question: is there another way to detect when the window loses focus other than requestAnimationFrame not calling the callback?

like image 804
Petruza Avatar asked Dec 21 '11 14:12

Petruza


People also ask

Why is requestAnimationFrame better than setInterval or setTimeout?

Another reason requestAnimationFrame is so useful is the fact that it gives you a time variable which you can use to calculate the amount of time between frames. This is not something that setInterval will do and since setInterval is not 100% accurate it is very possible your animation will get messed up over time.

How do I set frame rate in requestAnimationFrame?

Method 1: Update data via setInterval, and graphics via RAF. Keep those values in an object for each animated element. Assign the transform string to a variable in the object each setInterval 'frame'. Keep these objects in an array. Set your interval to your desired fps in ms: ms=(1000/fps).

How do I slow down requestAnimationFrame?

Slowing down or cancelling requestAnimationFrame() If your animation requires a different frames per second (up to 60 fps) or simply doesn't require that high a level of refresh rate, you can slow it down by calling requestAnimationFrame inside setTimeout() .


1 Answers

Request animation frame is in sync with your monitors refresh rate (there is no use to animate more frames than you are actually showing on screen)

Here is a reference from the mozilla docs: https://developer.mozilla.org/en/DOM/Animations_using_MozBeforePaint

Frame rate control

MozBeforePaint won't fire more than a fixed number of times per second, e.g. 50 or 60. This is intentional, because modern operating systems and hardware won't let the browser display more frames than that anyway. Limiting the frame rate avoids wasting work, thereby saving CPU usage and power and improving overall system performance.

like image 121
Daniel Kurka Avatar answered Sep 29 '22 21:09

Daniel Kurka