Css 确实<；链接>；标记入<；车身>；延迟加载的事件？
我试图理解在“head”v/s下放置“link”标签在“body”下放置对DomContentLoaded事件计时的影响。 我观察到，当'head'下有'link'时，DomContentLoaded会在DOM准备就绪后立即触发，而当'body'下有'link'时，则会在下载并解析CSS文件后触发事件。 所以，我想知道为什么当“link”在“body”下时，DOMContentLoaded会花费时间Css 确实<；链接>；标记入<；车身>；延迟加载的事件？,css,domparser,domcontentloaded,Css,Domparser,Domcontentloaded,我试图理解在“head”v/s下放置“link”标签在“body”下放置对DomContentLoaded事件计时的影响。 我观察到，当'head'下有'link'时，DomContentLoaded会在DOM准备就绪后立即触发，而当'body'下有'link'时，则会在下载并解析CSS文件后触发事件。 所以，我想知道为什么当“link”在“body”下时，DOMContentLoaded会花费时间 <!DOCTYPE html> <html> <head>
<!DOCTYPE html>
<html>
<head>
<title>Rendering Understanding</title>
</head>
<body>
<link rel='stylesheet' href='/stylesheets/style1.css' />
<hr>
<h2>
Hello World!
</h2>
</body>
</html>
渲染理解
你好，世界！
- 当在head标记或body标记下遇到脚本标记时，html解析器将停止解析，请求的脚本将从网络中获取，控制将转到JS egine。脚本将被解析，然后执行，之后控件将返回到HTML解析器。因此，当再次开始解析时，完整的HTML被解析；DOM将准备就绪，并且将触发“DomContentLoaded”加载事件
- 当在“body”标记中再次遇到链接标记时，HTML解析将被阻止，直到从网络获取请求的样式表并创建CSSOM为止。在完成此活动后，控件将再次返回到HTML解析器，如果这一次完成了HTML解析；DOM将准备就绪，并且将触发“DomContentLoaded”加载事件
注意-链接标记放置在“head”标记内时不会阻止HTML解析器，但放置在“body”标记内时会阻止HTML解析。因此，触发DomContentLoaded事件需要时间，因为此时完整的DOM尚未就绪。我做了一些分析，在chrome（76.0.3809.100）中发现了以下观察结果：- 什么时候阻止HTML解析
- 当在head标记或body标记下遇到脚本标记时，html解析器将停止解析，请求的脚本将从网络中获取，控制将转到JS egine。脚本将被解析，然后执行，之后控件将返回到HTML解析器。因此，当再次开始解析时，完整的HTML被解析；DOM将准备就绪，并且将触发“DomContentLoaded”加载事件
- 当在“body”标记中再次遇到链接标记时，HTML解析将被阻止，直到从网络获取请求的样式表并创建CSSOM为止。在完成此活动后，控件将再次返回到HTML解析器，如果这一次完成了HTML解析；DOM将准备就绪，并且将触发“DomContentLoaded”加载事件
注意-链接标记放置在“head”标记内时不会阻止HTML解析器，但放置在“body”标记内时会阻止HTML解析。因此，触发DomContentLoaded事件需要时间，因为此时完整的DOM还没有准备好。因为DOM中的头在体之前，所以首先加载它的内容。同样，页脚中的内容也是最后加载的。@CarolMcKay，但我不明白的是为什么DomContentLoaded事件等待CSS解析！据我所知，当“body”标记DOMContentLoaded事件中没有同步脚本时，它不会等待CSSOM的创建，并在HTML解析完成且DOM就绪后立即触发。对不起，我现在理解了您的问题，我们从来没有遇到过它，因为在DOM中头部在身体之前，它的内容首先被加载。同样，页脚中的内容也是最后加载的。@CarolMcKay，但我不明白的是为什么DomContentLoaded事件等待CSS解析！据我所知，当“body”标记DOMContentLoaded事件中没有同步脚本时，它不会等待CSSOM创建，并在HTML解析完成且DOM就绪后立即触发。对不起，我现在理解了您的问题，我们从未遇到过它。