[译] async 与 defer

• 原文地址：async vs defer attributes

说明

<script>

让我们从定义没有任何属性的<script>开始。HTML 文件会被解析直到命中脚本文件，那个时候，HTML 将会停止解析并且将会发送一个请求去获取这个文件（如果他是外链），在 HTML 继续解析之前，脚本将会被执行。

<script async>

async 在 HTML 解析的同时下载文件，而且当文件完成下载之后，将会暂停 HTML 解析来执行文件。

<script defer>

defer 在 HTML 解析的同时下载文件, 并且在 HTML 解析完成后才执行它，defer 的多脚本也保证了他们以它们出现在文档上的顺序被顺序执行。

我什么时候应该用什么？

通常，您希望尽可能使用 async, 然后是 defer, 再是没有这些属性的脚本。这里有一些常用的规则去遵守。

• 如果脚本是模块，并且没有依赖其他任何脚本时用 async
• 如果脚本依赖或者被其他脚本依赖时用 defer
• 如果脚本文件很小，并且被一个 async 脚本依赖时用没有异步属性的内联脚本，并且放在 async 脚本上方。

支持

IE9 及以下在实现 defer 的时候有一些特别严重的 bug，以至于脚本的执行顺序无法被保证，如果你需要支持 IE9 及以下，建议不要全部用 defer，并且对你的脚本不添加任何属性，如果执行顺序很重要。阅读属性说明文件

译者总结

• defer 和 async 下载都是异步的
• defer 在 文件解析完成时（DOMContentLoaded之前）执行，async 在下载完成后执行
• 多个 defer 的执行顺序和他们出现在页面上的顺序一致
• async 的执行顺序无法保证。