Question

我试图了解将'link'标签放在'head'v / s放在'body'下对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”加载事件。

注意-链接标签放置在“ head”标签内时不会阻止HTML解析器，但放置在“ body”标签内时会阻止HTML解析。因此，由于当时尚未准备好完整的DOM，因此触发DomContentLoaded事件需要花费一些时间。

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

1 个答案: