script标签中的async/defer是什么意思?

1. 默认script标签

image

我们先来定义一下不带任何属性的 <script> 标签的作用：HTML 文件会被解析，直到遇到该脚本文件时暂停解析，然后会发起请求去获取该文件（如果是外部脚本），接着执行该脚本，之后才会恢复解析。

这个情况下的script会阻塞html解析，下载+执行完才继续html，并且script按照相对顺序执行

2. async Script标签

image

如图所示，async 会在 HTML 解析期间下载文件，并在下载完成后暂停 HTML 解析器来执行它。

这种情况下，script不一定按照相对顺序执行，而是谁先下载好谁执行

3. defer Script标签

image defer 会在 HTML 解析期间下载文件，但只会在解析器完成解析后执行。此外，defer 脚本保证按照它们在文档中出现的顺序执行。

此script在html解析时异步下载，但下载完不是立即执行，而是等到html解析完，并且按照相对顺序执行。