Thursday, 9 September 2021

Confusion about frame drops and requestAnimationFrame

Please free feel to point out if my following understanding is wrong: Normally our display refresh rate is 60hz so the web page would refresh the screen 60 times every second if everything goes well. That means the rendering is happening at 16 ms interval right? So anything in our JavaScript that takes more than 16 ms to execute would cause janky experience to the user. So my question is:

  1. let's say we have a function handleScroll and it is going to take 100ms to execute from start to finish. and we added it to addEventListener('scroll', handleScroll). Is it true that whenever scroll event fires, the user would experience jank experience since 6 frames are skipped/dropped in the rendering cycle? because 100ms / 16ms = 6.25?
  2. I think requestAnimationFrame tells the browser to run the callback before the next frame is rendered so I saw people mentioned that it can prevent frames being dropped for animation. But it is unclear to me how it is going to help with that since the callback we pass into requestAnimationFrame is still going to run to completion so if that callback takes more than 16ms we are going to miss the next frame inevitably right?


from Confusion about frame drops and requestAnimationFrame

No comments:

Post a Comment