Is CSSOM created only when the html page has link for external sheet or is it even created when we have inline styling or internal css?

1
votes

I have gone through critical render path and its importance in making the page load faster. As I understand, the construction of DOM tree and CSSOM based tree happen before page could be rendered. The html parser also moves top down coming across tags. Most important take away is that script execution does two things:

  1. blocks parser ( assuming async or defer is not used)
  2. pauses for CSSOM tree construction first

Thus whole process of DOM tree construction and java script execution is stalled for CSSOM based tree construction.

Also we know, the css styling can be done in following three ways-

  1. External css as a link under
  2. internal css defined inside under
  3. inline css defined using style attribute for every element tag wherever styling is required.

The problem is that both for external css and internal css we can be sure that it is inside head tag and therefore it is all likely that before parser hits a script tag, it has already gone across the styling part and therefore when script execution has to pause for CSSOM construction, it can happen smoothly. Even if is also included inside along with styling, we can first include tag ( for external sheet) or tag ( for internal css) and then use that tag.

But what if inline-styling is used? Because in that case if parser comes across the tag, the script execution may not pause for any CSSOM construction as styles being inline with elements, will come later in the page after the parser crosses tag . Thus the script which normally would have waited for CSSOM tree to be built first, will continue its execution as it concludes that there is no styling involved.

So I ask -

  1. Regarding CSSOM based tree construction, does it happen only when external stylesheet is included or happen even when internal or inline css is used?

  2. Is CSSOM tree constructed even when inline styling is used and if Yes, then is it required to use the script tag at the very bottom so that all inline styling has already been parsed by the browser before script execution?

1
htmlcssdom
I think there's a conflation of two CSS concepts here. The CSSOM, and the box tree. The CSSOM is an API for manipulating stylesheets. As an API it's not "constructed", and mostly not concerned with inline styling. It's the box tree that needs to be constructed prior to rendering. This needs and uses all the nodes in the DOM document, and all the styling associated with it, whatever its source. - Alohci
@Alohci - By construction of CSSOM, i meant the construction of the tree based on CSSOM. You are right to call it as API for say a code in java-script uses it to modify the styling of any node. Coming to your response, where in you mentioned that its created irrespective of the source, what I ask is, if its inline style, and parser comes across script tag, it ,as per rulebook, stops executing unless CSSOM based tree is completely constructed but how would it know for sure that there are more stylings down the page against respective elements tag as the parser has not reached there yet? - gamebecks
It (by which I assume you mean the browser) doesn't know. When the script runs, it operates on the DOM document and the box tree and, if necessary, any layout as it stands at that point in the parsing. - Alohci

1 Answers

0
votes

  1. It happens whenever it's needed. So prior to a render, and prior to scripts running.

  2. Yes, and not necessarily. The script operates on the DOM Document and the box tree however they happen to be at the time the script runs. The document and the box tree are always coherent wholes when the script runs, even when the HTML is only partially parsed. If that state is sufficient for the script to do its job successfully, then it need not be run at the end of the parsing process.