…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
rAFoccurs before painting.
- The sequence of events is as follows:
- execute JS from task queue
- style calculations, layout, and paint (collectively called a frame commit)
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
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
It is important to not apply any DOM changes when using
requestIdleCallbackbecause 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
requestAnimationFramecallback. This also ensures that the time needed for the DOM changes doesn’t cross the browser deadline prescribed to the