…I got nothing.

Actual Notes :D

  • requestIdleCallback allows you to schedule actions during any remaining time at the end of a frame or when a user is inactive.

  • This is different from requestAnimationFrame in that rAF occurs before painting.

  • The sequence of events is as follows:
    1. execute JS from task queue
    2. rAF
    3. style calculations, layout, and paint (collectively called a frame commit)
    4. requestIdleCallback (or anywhere between the first 3 steps if the user is idle)
  • You cannot tell how much time the first 3 steps will take up, so there is no guarantee that there will be any remaining time to allocate to your requestIdleCallback’s. This means that only non-essential work should be executed using requestIdleCallback.

  • To ensure that this non-essential work gets done eventually, you can set a timeout when calling requestIdleCallback. When this timeout is reached, the browser WILL execute the callback passed to requestIdleCallback.

  • It is important to not apply any DOM changes when using requestIdleCallback because the callback may be executed at the end of frame, i.e. after the frame has been committed. This means that if there are any layout reads in the next frame (e.g. getBoundingClientRect), the layout needs to be recalculated via a forced synchronous layout. When you need to make a DOM update, schedule the update via a requestAnimationFrame callback. This also ensures that the time needed for the DOM changes doesn’t cross the browser deadline prescribed to the requestIdleCallback.

  • What is a forced synchronous layout? This is an extra layout operation that is caused when there are DOM changes from JavaScript and those changes are subsequently read. The extra layout operation is necessary because the DOM changes from JS invalidate the layout calculation from the previous frame.

Useful references


Sooo…three years later and I’m finally getting around to posting something. I’ve always kept a strong pipeline of articles to read and conference talks to watch, but I eventually end up forgetting all the cool things I learn. I didn’t really take any notes or, if I did, they were always in my trusty moleskine which wasn’t really too searchable ): . Thus came the idea to use the blog as my notebook :D, so here we are…

DISCLAIMER: These notes are meant to be short and as jump off points for deeper refreshers when necessary

Actual notes :D

  • requestAnimationFrame allows you to schedule actions (e.g. animation) to occur with the next layout/paint cycle of the browser event loop

  • Animations scheduled using a timer (i.e. setTimeout), should instead switch to using requestAnimationFrame

  • requestAnimationFrame allows you to sync your animations with the refresh rate of the client’s monitor, thereby eliminating extra work that may be done or missed when using setTimeout

  • setTimeout may be doing mistimed work because its callback is executed as part of the browser event loop’s task queue. The task queue gets processed after a frame paint and after the javascript execution stack is empty. Since you can’t tell how long it would take for the stack to empty, you cannot be certain that your work scheduled with setTimeout will be executed within the current frame. Put another way, you cannot be certain that your animation will execute before the next paint. This skip in animation work can cause jank for your users.

  • If the interval you set for setTimeout is less than the refresh rate of a user’s monitor, you may be doing more work than a user’s monitor can actually display to them

  • requestAnimationFrame is also battery friendly because it doesn’t run unless its browser window/tab is active.

  • A use case for requestAnimationFrame are scroll/resize related animations, e.g. parallax effects. rAF helps avoid jank if you are doing expensive DOM mutations in your scroll event handlers

Useful references

Welcome to Will’s blog :D. Hopefully, I’ll post regularly. Like the bio says, I’ll post things primarily software development and maybe some quant and trading algo stuff.