是否 <link> 标记 <body> 延迟DomContentLoaded事件？

Question

我试图了解将DomContentLoaded事件计时的“链接”标记放在“标头”之下，对“正文”之下的影响。 我观察到，当“链接”位于“头部”下方时，DOM准备就绪后会立即触发DomContentLoaded；但是，当“链接”位于“主体”下方时，则会在下载并解析CSS文件之后触发该事件。 因此，我想知道为什么DOMContentLoaded在“链接”位于“正文”下时要花费一些时间。

<!DOCTYPE html>
<html>

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

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

</body>
</html>

Answer 1

我进行了一些分析，发现在铬（76.0.3809.100）中存在以下观察结果：-

HTML解析何时被阻止？

• 当在head标签或body标签下遇到脚本标签时，html解析器将停止解析，并且将从网络中获取请求的脚本，控制权将移交给JS egine。 脚本将被解析然后执行，然后控件将返回到HTML解析器。 因此，当再次开始解析并且这次将解析完整的HTML时； DOM将准备就绪，并且将触发“ DomContentLoaded”加载事件。
• 当再次在“ body”标记内遇到Link标记时，HTML解析将被阻止，直到从网络获取请求的样式表并创建CSSOM。 再次完成此活动后，控件将再次返回到HTML解析器，如果这次完成了完整的HTML解析，则该控件将返回到HTML解析器。 DOM将准备就绪，并且将触发“ DomContentLoaded”加载事件。

注意 -Link标记放在'head'标记内时不会阻止HTML解析器，但是当放在'body'标记内时会阻止HTML解析。 因此，DomContentLoaded事件需要花费一些时间来触发，因为此时尚未准备好完整的DOM。