[SOLVED] Does <link> tag in <body> delays DomContentLoaded event?

Does <link> tag in <body> delays DomContentLoaded event?

I am trying to understand the impact of putting 'link' tag under 'head' v/s putting under 'body' on the DomContentLoaded event timings. I observed that when 'link' is under 'head' DomContentLoaded is fired immediately after DOM is ready but when 'link' is under 'body' the event is fired after the CSS file is downloaded and parsed. So, I want to know that why DOMContentLoaded is taking time when 'link' is under 'body'.

<!DOCTYPE html>
<html>

<head>
  <title>Rendering Understanding</title>
</head>

<body>
  <link rel='stylesheet' href='/stylesheets/style1.css' />
  <hr>
  <h2>
    Hello World!
  </h2>

</body>
</html>

Solution

I did some analysis and found the following observations in chrome(76.0.3809.100):-

When is HTML parsing blocked?

When a script tag is encountered either under head tag or under body tag the html parser will stop parsing and the requested script will be fetched from network, control will go to the JS egine. Script will be parsed then executed and after that the control will be returned back to the HTML Parser. So, when the again the parsing starts and the complete HTML is parsed this time; DOM will become ready and the 'DomContentLoaded' loaded event will be fired.
When a Link tag is encountered inside the 'body' tag again the HTML Parsing will be blocked till the requested stylesheet is fetched from network and CSSOM is created. Again after this activity is done the control will again be returned to the HTML parser and if this time complete HTML parsing is done; DOM will become ready and the 'DomContentLoaded' loaded event will be fired.

Note - Link tag does not blocks the HTML parser when placed inside 'head' tag but it blocks the HTML parsing when placed inside 'body' tag. Therefore DomContentLoaded event takes time to fire as the complete DOM is not ready by that time.