声明
本文是对此文进行翻译转载,如有需要,敬请访问原文。
标志
<script>
让我们从 <script> 定义没有任何属性的功能开始。HTML 文件将被解析,直到命中脚本文件,此时解析将停止,并且将发出请求以获取文件(如果它是外部的)。然后,在恢复分析之前将执行该脚本。
<script async>
async 在 HTML 解析期间下载文件,并在下载完成后暂停 HTML 解析器以执行它。
<script defer>
defer 在 HTML 解析期间下载文件,并且仅在解析器完成后执行它。 defer 还保证脚本按它们在文档中出现的顺序执行。
我应该什么时候使用什么?
通常,您希望在可能的情况下使用 async ,然后 defer 不使用属性。以下是一些需要遵循的一般规则:
- 如果脚本是模块化的,并且不依赖于任何脚本,则使用
async. - 如果脚本依赖于另一个脚本或被另一个脚本所依赖,则使用
defer. - 如果脚本很小并且由
async脚本依赖,则使用在async脚本上方没有放置任何属性的内联script。
支持
IE9 及更低版本在实现过程中存在一些非常糟糕的错误, defer 因此无法保证执行顺序。如果你需要支持 <= IE9,我建议你根本不使用 defer ,如果执行顺序很重要,就包括你的脚本,没有属性。在此处阅读详细信息。