请说说`<script>`、`<script async>`和`<script defer>`的区别

在前端开发中，<script> 标签用于嵌入或引用 JavaScript 代码。<script> 标签有几个属性可以影响脚本的加载和执行方式，其中 async 和 defer 是两个常用的属性。以下是它们之间的主要区别：

1. 普通的 <script>:

   • 当浏览器遇到 <script> 标签时，它会立即下载并执行该脚本。
   • 在执行脚本期间，HTML 解析会被阻塞，直到脚本执行完毕。
   • 这可能导致页面渲染延迟，尤其是当脚本较大或网络较慢时。

2. <script async>:

   • async 属性告诉浏览器异步下载脚本，即不阻塞 HTML 解析。
   • 一旦脚本下载完成，HTML 解析会暂停，脚本会立即执行，然后 HTML 解析会继续。
   • 这意味着脚本可能在文档的任何位置执行，不一定按照它们在 HTML 中出现的顺序。
   • async 脚本的执行顺序是不确定的，多个 async 脚本可能按照它们完成的顺序执行，而不是它们在页面中的顺序。

3. <script defer>:

   • defer 属性也告诉浏览器异步下载脚本，即不阻塞 HTML 解析。
   • 但是，与 async 不同，defer 脚本会等到整个 HTML 文档解析完成后才执行。
   • defer 脚本按照它们在 HTML 中出现的顺序执行。
   • 这意味着如果你有多个 defer 脚本，它们会按照顺序一个接一个地执行，而不是并行执行。

总结：

• 普通的 <script> 会阻塞 HTML 解析直到脚本下载并执行完成。
• <script async> 会异步下载脚本并在下载完成后立即执行，可能打断 HTML 解析，且执行顺序不确定。
• <script defer> 会异步下载脚本但等到 HTML 解析完成后才执行，按照它们在 HTML 中的顺序执行。