I was wondering whether DOM node attributes are synchronous in terms of styling information? I was reading the following article, and I read the following line
Scripts asking for style information, like “offsetHeight” can trigger incremental layout synchronously.
From the article, it seems to indicate that there is a “dirty node” system that will pause script execution until the document has been fully laid out. So, if I had a dirty node n, if n.offsetHeight is called from javascript, the article suggest that n.offsetHeight will not return until the offset height has been fully reified. Is my understanding of this correct? Can I rely on the browser to always give me the current stable version of any attached DOM element.
Put succinctly, if I modify some styling on a node (using the style attribute, class names, dynamic css, whatever else), and then read some property that depends on said styling, can I always be certain that the value I get back will be the value of the node with my previous styling applied? If this is not the case, how can I know when my styling changes have been applied?
When you read information from the 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 you read them.
When you change the DOM so that the layout changes, all the elements are not recalculated directly when you make the change. That would just be a waste, if you change something more that would need another recalculation. The layout remains uncalculated as long as there is no need for the recalculation. If you read a property that is depending on that recalculation, it will be done before the value is returned.
So, by planning how you set and read properties, you can avoid unnessecary recalculations.