$nextTick() and the spot between the `layout` and the `paint` phase


This is more a browser question than a Vue question. Nevertheless, it certainly is relevant for some Vue developers and I hope there’s someone with solid understanding of how browsers work and knows the answer.

I created a fiddle demonstrating some non-obvious properties of the $nextTick()'s timing: https://jsfiddle.net/y5adjrg0/

  1. Even though the DOM is already updated, the change is not yet painted on the screen.
  2. Even though the change is not yet painted on the screen, properties like scrollHeight are already updated with respect to the new DOM.

This behavior is actually good for my use case. The $nextTick() essentially schedules the function to happen at the sweet spot in between browser’s layout and paint phases.

My question is: can we, at least in principle, rely on those two properties? On this browsers’ behavior?

Related questions:

Does nextTick() work weirdly?