CODEWITHSUNDEEP
javascriptanimationbrowserrenderingfrontend
johnwaynerui
johnwaynerui

Reputation: 7

what is the difference between refresh rate and frame rate in browser when it comes to requestAnimationFrame?

As i know, for common displays, the refresh rate is 60/s, but what is frame rate when it comes to rendering process in browser? I have checked many refs that tell me if you want get a better animation performance, you need to keep frame rate sync with refresh rate and it will be good using requestAnimationFrame. what does this really mean? Who produces a frame in a animation made by javascript execution? is it produced by javascript itself? Then what about a css transition? Can somebody explain this for me in detail? Many thanks.

Upvotes: 0

Views: 469

Answers (1)

Matt Mokary
Matt Mokary

Reputation: 727

A browser determines the rate at which it refreshes the window. It's possible to refresh at a rate greater than this in JavaScript (e.g. by doing setInterval(redraw, 10) which redraws every 10ms (100 fps)), but going higher than the browser's refresh rate is frivolous; the browser will not rerender that quickly and thus you are wasting computing time building frames that will not be shown.

requestAnimationFrame helps with this by calling your function -- presumably a redraw function -- before every browser repaint. This ensures that you only perform redraws when they will actually be shown. This makes for better performance; it guarantees that redraw calculations will not be performed needlessly. It is especially beneficial if those redraw calculations are computationally expensive.

Helpful documentation: requestAnimationFrame

Upvotes: 1

Related Questions