DragonI

• 167 Tools 
• 146 Articles
• 73 Videos
• 50 Slidedecks
• 27 Books
• 6 Courses
• 25 Audits

requestAnimationFrame Scheduling For Nerds

A few people were curious about the scheduling of requestAnimationFrame callbacks, so here’s the tl;dr:

medium.com|Paul Irish

Any rAFs queued in your event handlers will be executed in the ​same frame​. Any rAFs queued in a rAF will be executed in the next frame​.

All rAFs that are queued will be executed in the intended frame.

Let’s say there’s 5 callbacks queued up, and they’ll each take ~100 ms. The browser will not distribute them amongst many frames. It’ll try to run them all in the intended frame, even if it takes 500 ms. That means a pretty significant jank.

You may be asking, “why would there be FIVE animationFrame callbacks requested from within a single frame?” It can accidentally happen if you do 2 very reasonable things. 1) You request a new callback at the end of a rAF. 2) You request rAF callbacks from a input handlers. As a result, you’ve doubled/tripled your work each frame. Youch.

rAFs aren’t throttled for you if they take too long to execute.

It’s up to you to coalesce rAFs on your own. So: if there’s a chance of multiple of the “same” callbacks firing within the same frame, then you must manage the scheduling/coalescing.

That said, Chrome (at least) will try to help some. If rAFs are hogging the main thread, the browser will start to throttle input events so that, hopefully, the contention will clear up.

And now this.. Two diagrams that (while only slightly related) may illustrate the lifecycle of events in a frame:

...

For more implementation details, Sami’s Blink Scheduler talk from BlinkOn 3 is worth a watch, and you can poke around the Scheduler Overhaul resources in ds-hwang‘s Chromium-docs.

CDNperf finds you fast and reliable JavaScript CDNs that make your websites snappy and happy!

CDNperf monitors popular CDN sites and graphs this data.

CDNperf started as a collaboration between jsDelivr, a CDN, and JSter, a JavaScript catalog. We noticed it was difficult to find information on JavaScript CDNs. As a result an idea of a service was born. I have covered the history in more detail at SAM blog.