HTML 解析过程中 Script 标签、DomContentLoaded 事件的加载顺序

一、各类型 Script 标签的执行顺序

1. 无属性的 <script> 标签：

   • HTML 解析器遇到无属性的 <script> 标签时，会暂停解析 HTML，立即下载并执行该脚本，然后继续解析后续的 HTML 内容。
   • 这种类型的脚本是同步执行的，会阻塞 HTML 的解析。

2. 带有 defer 属性的 <script> 标签：

   • defer 属性表示脚本在 HTML 解析完成后再执行。
   • 当 HTML 解析器遇到带有 defer 属性的 <script> 标签时，会继续解析 HTML，同时异步下载脚本。
   • 当整个 HTML 解析完成后（即 DOMContentLoaded 事件触发前），所有带 defer 属性的脚本会按顺序依次执行。
   • 这种类型的脚本不会阻塞 HTML 的解析，但会在 DOMContentLoaded 事件触发前执行。

3. 带有 async 属性的 <script> 标签：

   • async 属性表示脚本异步下载并立即执行，不必等到 HTML 解析完成。
   • 当 HTML 解析器遇到带有 async 属性的 <script> 标签时，会继续解析 HTML，同时异步下载脚本。
   • 当脚本下载完成后，会立即执行，无论 HTML 是否已经解析完成。
   • 这种类型的脚本也不会阻塞 HTML 的解析，但其执行顺序是不确定的，脚本的执行时间取决于下载的完成时间。

二、DOMContentLoaded 事件

• DOMContentLoaded 事件在初始 HTML 被完全加载和解析后触发，而无需等待样式表、图片和子框架的完全加载。
• 在触发 DOMContentLoaded 事件之前，会先执行所有带有 defer 属性的脚本。

三、总结

总的来说，各类型 <script> 标签的执行顺序及与 DOMContentLoaded 事件的关系如下：

1. 无属性的 <script> 标签会立即同步执行，阻塞 HTML 解析。
2. 带 async 属性的 <script> 标签会异步下载并立即执行，不阻塞 HTML 解析，但执行顺序不确定。
3. 带 defer 属性的 <script> 标签会异步下载，在 HTML 解析完成后按顺序执行，不阻塞 HTML 解析。
4. DOMContentLoaded 事件会在所有 HTML 元素解析完成并在所有 defer 脚本执行后触发。