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

Question

我试图了解将 'link' 标记放在 'head' 下 v/s 放在 'body' 下对 DomContentLoaded 事件计时的影响。我观察到，当 'link' 低于 'head' 时，DomContentLoaded 在 DOM 准备就绪后立即触发，但是当 'link' 低于 'body' 时，事件在 CSS 文件被下载并解析。所以，我想知道为什么 DOMContentLoaded 在 'link' 低于 '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>

Answer 1

我做了一些分析，在 chrome(76.0.3809.100) 中发现了以下观察结果：-

HTML 解析何时被阻止？

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

注意 - Link 标签放在 'head' 标签内时不会阻止 HTML 解析器，但它会阻止 HTML 放在 'body' 标签内时解析。因此，DomContentLoaded 事件需要一些时间才能触发，因为到那时完整的 DOM 还没有准备好。

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

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

css

domparser

domcontentloaded