script标签中async 和defer的区别

自己记录一下学习

<script> 标签用于在 HTML 页面中嵌入 JavaScript 代码。当浏览器遇到 <script> 标签时，会立即停止解析 HTML，并开始下载、编译和执行 JavaScript 代码。这可能会导致页面加载和执行 JavaScript 代码之间的延迟，从而影响用户体验。

为了解决这个问题，HTML5 引入了 async 和 defer 属性，用于控制 <script> 标签的加载和执行行为。

区别如下：

1. async 属性：当浏览器遇到带有 async 属性的 <script> 标签时，它将继续解析 HTML，并在后台异步下载脚本文件。一旦脚本文件下载完成，浏览器将停止解析 HTML，立即执行脚本，然后继续解析和渲染剩余的 HTML。多个带有 async 属性的脚本文件的执行顺序是不确定的，因此它们之间不会有依赖关系。

2. defer 属性：当浏览器遇到带有 defer 属性的 <script> 标签时，它将继续解析 HTML，并在后台异步下载脚本文件，但不会立即执行脚本。相反，它会等到整个 HTML 解析完成后，在 DOMContentLoaded 事件触发之前按顺序执行所有带有 defer 属性的脚本文件。多个带有 defer 属性的脚本文件的执行顺序是按照它们在 HTML 中出现的顺序执行的。

总结来说，async 属性用于异步加载并执行脚本，它不会阻塞 HTML 解析和渲染，适用于没有依赖关系的脚本。defer 属性用于异步加载脚本，但会在整个 HTML 解析完成后按顺序执行，适用于有依赖关系的脚本。