javascript - Why is it recommend to nest setTimeout in requestAnimationFrame when scheduling something after a repaint? - Stack

In the mozilla docs on performance best practices for front-end engineers it's remended to bine setTimeout with requestAnimationFrame to run something immediately after a repaint:

requestAnimationFrame(() => {
  setTimeout(() => {
    // This code will be run ASAP after Style and Layout information have
    // been calculated and the paint has occurred. Unless something else
    // has dirtied the DOM very early, querying for style and layout information
    // here should be cheap.
  }, 0);
});

Why is this the remended solution? What exactly makes this the optimal way to schedule something right after a repaint?

In the mozilla docs on performance best practices for front-end engineers it's remended to bine setTimeout with requestAnimationFrame to run something immediately after a repaint:

requestAnimationFrame(() => {
  setTimeout(() => {
    // This code will be run ASAP after Style and Layout information have
    // been calculated and the paint has occurred. Unless something else
    // has dirtied the DOM very early, querying for style and layout information
    // here should be cheap.
  }, 0);
});

Why is this the remended solution? What exactly makes this the optimal way to schedule something right after a repaint?

• javascript
• browser
• settimeout
• repaint
• requestanimationframe

Share Improve this question Follow asked Nov 8, 2017 at 16:03 user5918874user5918874 2

• The DOM is not recalculated whe you set new (layout)values to it, the recalculation occurs when you read values after changing the DOM, or just before it is repainted. The timed function gives you most likely an unchanged DOM, i.e. it is readily calculated, and reading a value doesn't cause recalculation, because the timed function will be called immediately after the repaint. – Teemu Commented Nov 8, 2017 at 16:08
• "querying for style and layout information here should be cheap." no page re-flow, calculation, etc... – Peter Commented Nov 8, 2017 at 16:09

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

Why is this the remended solution? What exactly makes this the optimal way to schedule something right after a repaint?

Running code immediately after a repaint maximizes the chance that the DOM has been fully calculated, and thus minimizes the chance that querying the dom will cause a costly reflow. If you're not querying the dom anyway, then this isn't something you need to worry about.

requestAnimationFrame will schedule code to run immediately before the repaint, which is close to where you want to be but not quite. So then doing a setTimeout of 0 (or setImmediate on browsers that support it) will execute code as soon as it can after that. This won't guarantee that your code is the first thing to run after the repaint, but it's the best you can do given the apis at your disposal.