彻底理解 async 和 defer 属性的作用及应用场景

默认HTML 中 script 标签的属性和加载顺序

• script 标签默认是阻塞加载的，也就是先下载src内容，然后执行src内容，然后再往后读文档
• head 标签中的 script 标签按顺序加载执行，然后再加载 body 标签的元素。
• script 标签移到文档最后，就会先加载body标签中的内容，再按顺序加载执行script标签中的内容，此时页面看上去会更快一些。

script 标签增加 async 属性后

• 当浏览器遇到带有 async 属性的 script 标签时，浏览器立即开始下载脚本文件，但不会阻止 HTML 解析过程。
• 脚本文件下载完成后，浏览器会立即执行该脚本，此时不管 HTML 是否已经解析完成。
• 如果当前页面有多个带有 async 属性的脚本文件，浏览器会立即下载这些脚本文件，下载完成后立即执行。
  • 注意：多个脚本文件可能会以不确定的顺序执行，因为这些脚本文件下载完成的顺序可能不同，下载完成后立即执行。
• async 属性主要适用于独立的脚本，不依赖于页面其他内容的加载顺序，且无需等待 HTML 解析完毕即可执行的情况。

script 标签增加 defer 属性后

• 当浏览器遇到带有 defer 属性的 script 标签时，立即开始下载脚本文件，但会延迟脚本的执行，直到 HTML 解析完成后再执行。
• 多个带有 defer 属性的脚本文件会按照它们在页面中出现的顺序依次执行。
• 与 async 不同，defer 会保证脚本文件按在文档中script标签顺序执行，并且会在文档解析完成后执行。
• 适用于需要等待文档解析完成后并需要按顺序执行的脚本。

async 和 defer 属性应用场景对比

• 若脚本与其他script脚本及页面HTML元素无关，并且可独立运行，可使用 async属性以尽快地下载和执行脚本。
• 若脚本依赖于页面的结构，需要等待 HTML 解析完成，可以使用 defer 先下载，然后等html解析完成后执行。（或者将脚本放在 body标签 结尾处，可达到同样的效果）。