一文弄透script标签的async、defer属性

55 阅读1分钟

声明

本文是对此文进行翻译转载,如有需要,敬请访问原文。

标志

image.png

<script>

让我们从 <script> 定义没有任何属性的功能开始。HTML 文件将被解析,直到命中脚本文件,此时解析将停止,并且将发出请求以获取文件(如果它是外部的)。然后,在恢复分析之前将执行该脚本。

image.png

<script async>

async 在 HTML 解析期间下载文件,并在下载完成后暂停 HTML 解析器以执行它。

image.png

<script defer>

defer 在 HTML 解析期间下载文件,并且仅在解析器完成后执行它。 defer 还保证脚本按它们在文档中出现的顺序执行。

image.png

我应该什么时候使用什么?

通常,您希望在可能的情况下使用 async ,然后 defer 不使用属性。以下是一些需要遵循的一般规则:

  • 如果脚本是模块化的,并且不依赖于任何脚本,则使用 async .
  • 如果脚本依赖于另一个脚本或被另一个脚本所依赖,则使用 defer .
  • 如果脚本很小并且由 async 脚本依赖,则使用在 async 脚本上方没有放置任何属性的内联 script 。

支持

IE9 及更低版本在实现过程中存在一些非常糟糕的错误, defer 因此无法保证执行顺序。如果你需要支持 <= IE9,我建议你根本不使用 defer ,如果执行顺序很重要,就包括你的脚本,没有属性。在此处阅读详细信息