render blocking css.

(why to write css links in head tag)

The browser engines inside your browser construct the DOM tree from HTML content
received as a text document from the server. Similarly, it constructs the CSSOM
tree from the stylesheet content such as from an external CSS file or embedded (as
well as inline) CSS in the HTML.

Both DOM and CSSOM tree constructions happen on the main thread and these trees are
getting constructed concurrently. Together they form the Render Tree that is used
to print things on the screen which is also getting built incrementally as the DOM
tree is getting constructed (incrementally)

As we have learned that DOM tree generation is incremental which means as the
browser reads HTML, it will add DOM elements to the DOM tree. But that’s not the
case with the CSSOM tree. Unlike the DOM tree, CSSOM tree construction is not
incremental and must happen in a specific manner.

When browser find <style> block, it will parse all the embedded CSS and update the
CSSOM tree with new CSS (style) rules. After that, it will continue parsing the
HTML in the normal manner. The same goes for inline styling

But unlike the HTML file (for the DOM construction), the browser won’t process the
stylesheet file content one byte at a time. This is because browsers can’t build
the CSSOM tree incrementally as it reads the CSS content. The reason for that is, a
CSS rule at the end of the file might override a CSS rule written at the top of the
file.

Hence if the browser starts constructing CSSOM incrementally as it parses the

stylesheet content, it will lead to multiple renders of the Render Tree as the same
CSSOM nodes are getting updated because of the style overrides rules that appear
later in the stylesheet file. It would be an unpleasant user experience to see
elements changing styles on the screen as CSS is getting parsed.

Hence browsers do not process external CSS files incrementally and the CSSOM tree
update happens at once after all the CSS rules in the stylesheet are processed.
Once the CSSOM tree update is completed, then the Render Tree is updated which then
is rendered on the screen.

CSS is a render-blocking resource. Once the browser makes a request to fetch an

external stylesheet, the Render Tree construction is halted. Therefore the Critical
Rendering Path (CRP) is also stuck and nothing is getting rendered on the screen.
However, the DOM tree construction is still undergoing while the stylesheet is
being downloaded in the background.

Once the stylesheet is downloaded, parsed and CSSOM is updated, the Render Tree is
updated, and CRP is unblocked which leads to the paint of Render Tree on the
screen. Due to this reason, it is recommended to load all external stylesheets as
early as possible, possibly in the head section.