[译] 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 的执行顺序没法保证。