Javascript - Are DOM redraw methods synchronous?
We can divide this "redraw" process in 3 parts, DOM update, Reflow, Repaint.
All these operations do not follow the same rules:
DOM update: Always synchronous. The DOM is just an other js object, and its manipulations methods are all synchronous.
Reflow: That's the strange beast you stumbled upon. This is the recalculation of all box positions of the elements on the page.
Generally, browsers will wait until you finished all DOM modifications, and thus, the end of the js stream, before triggering it.
But some DOM methods will force this operation, synchronously. e.g, all the HTMLElement.offsetXXX
and alike properties, or Element.getBoundingClientRect
, or accessing in-doc's Node.innerText
or accessing some properties of getComputedStyle
returned object (, and probably others) will trigger a synchronous reflow, in order to have the updated values. So beware when you use these methods/properties.
Repaint: When things are actually passed to the rendering engines. Nothing in the specs says when this should happen. Most browsers will wait the next screen refresh, but it's not said it will always behave like that. e.g. Chrome is known for not triggering it when you blocked the scripts execution with alert()
, while Firefox will.