描述`<script>`、`<script async>`和`<script defer> `之间的差异

<script> 标签用于在网页上包含 JavaScript 。 async 和 defer 属性用于更改脚本加载和执行的方式/时机。

普通<script>

对于普通的 <script> 标签，在遇到它们时没有任何async 或 defer。 HTML 解析被阻止，脚本会被下载并立即执行。 脚本执行后 HTML 解析恢复。

<script async>

在<script async>中，脚本将与 HTML 解析并行获取，并在其可用时立即执行（可能在 HTML 解析完成之前），而且不一定按照 HTML 文档中的顺序执行。 当脚本独立于页面上的任何其他脚本时使用 async ，比如分析。

<script defer>

在<script defer>, 脚本将在文档已完全解析并执行时并行获取到 HTML 解析和执行， 但在 DOMContentLoaded 事件之前。 如果其中有多个，每个 defer 脚本都是按照它们在 HTML 文档中出现的顺序执行的。

如果脚本依赖于完全解析的 DOM，则defer 属性将有助于确保在执行前完全解析 HTML。

备注

• 一般说来， async 属性应该用于对页面初始化不重要且不依赖于对方的脚本。 defer 属性应该用于依赖于/被依赖于其他脚本的脚本。
• 没有src属性的脚本， async 和 deleger 属性会被忽略。
• 包含defer'或async'的<script>将被忽略，并显示 "来自异步加载的外部脚本对 document.write()的调用被忽略 "的信息。

参考资料

• <script>: 脚本元素 | MDN
• async vs defer 属性