我试图理解将"链接"标签放在"head"下与在"body"下放置对DomContentLoaded事件计时的影响。 我观察到，当"链接"在"head"下时，DomContentLoaded在DOM准备就绪后立即触发，但是当"链接"在"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>
我做了一些分析，在chrome(76.0.3809.100(中发现了以下观察结果：
HTML 解析何时被阻止？
- 当在 head 标签或正文标签下遇到脚本标签时，html 解析器将停止解析，请求的脚本将从网络中获取，控制权将转到 JS egine。脚本将被解析然后执行，之后控件将返回到 HTML 解析器。因此，当再次开始解析并且这次解析完整的 HTML 时;DOM 将准备就绪，并且将触发"DomContentLoaded"加载事件。
- 当在"body"标签中再次遇到链接标签时，HTML 解析将被阻止，直到从网络获取请求的样式表并创建 CSSOM。同样，完成此活动后，控件将再次返回到 HTML 解析器，如果这次完成 HTML 解析;DOM 将准备就绪，并且将触发"DomContentLoaded"加载事件。
注意 - 链接标签在放置在"head"标签内时不会阻止HTML解析器，但当放置在"body"标签内时，它会阻止HTML解析。因此，DomContentLoaded事件需要时间来触发，因为那时完整的DOM还没有准备好。