Are DOM nodes synchronous?

Question

I was wondering if the DOM node attributes are synchronous in terms of style information? I read the following article and I read the next line

Scripts requesting style information, such as "offsetHeight", can run an incremental layout synchronously.

It’s clear from the article that there is a “dirty node system” that pauses script execution until the document is fully laid out. So, if I had a dirty node n, if n.offsetHeight was called from javascript, the article assumes that n.offsetHeight will not return until the offset height has been fully confirmed. How do I get it right? Can I rely on the browser to always give me the current stable version of any attached DOM element.

Briefly, if I change some style to node (using the style attribute, class names, dynamic css, something else), and then read some property that depends on the specified style, can I always be sure that the value that I right, will be the node value with my previous style? If this is not the case, how do you know when my style changes were applied?

Answer 1

When you read information from DOM elements, you will always get the current value, and properties that rely on other properties or other elements will always be correctly calculated when they are read.

When you change the DOM so that the layout changes, all elements are not recalculated directly when changes are made. It will be just a waste if you change something more that requires a different recount. The layout remains unsettled if there is no need for recounting. If you read a property that depends on this allocation, it will be executed before the value is returned.

So, by planning how you set and read properties, you can avoid unjustified recalculations.