时间戳

首页 > 解决方案 > 标签是否延迟 DomContentLoaded 事件？

css - 标签是否延迟 DomContentLoaded 事件？

问题描述

我试图了解将“链接”标签放在“head”下与“body”下放置对 DomContentLoaded 事件时间的影响。我观察到，当 'link' 位于 'head' 下时，DomContentLoaded 在 DOM 准备好后立即触发，但当 'link' 位于 'body' 下时，在下载和解析 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>

标签： cssdomparserdomcontentloaded

解决方案

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

何时阻止 HTML 解析？

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

注意 -将链接标签放在“head”标签内时不会阻止 HTML 解析器，但放在“body”标签内时会阻止 HTML 解析。因此，DomContentLoaded 事件需要时间来触发，因为到那时完整的 DOM 还没有准备好。

推荐阅读