“异步延迟”一起使用时有啥作用？ [复制]

Posted 2023-03-22

【中文标题】“异步延迟”一起使用时有啥作用？ [复制]

【英文标题】：What does "async defer" do when used together? [duplicate]“异步延迟”一起使用时有什么作用？ [复制]

【发布时间】：2018-11-09 22:10:23

【问题描述】：

我遇到了以下代码：

<script src="foo.js" async defer>

我知道<script async...> 将下载脚本，然后在暂停 html 解析时解析它。我也明白<script defer...>会在解析完所有HTML后下载脚本并解析。

<script async defer...> 有什么作用（例如 async 和 defer 一起使用）？

【问题讨论】：

对async和defer的另一种解释：***.com/questions/10808109/script-tag-async-defer

“async”和“defer”都异步加载外部脚本。所以你不需要同时设置它们，除非你真的需要“异步”，它在现代浏览器中具有更高的优先级。如果您想在页面加载后立即与页面进行交互，请使用“异步”。如果您的脚本依赖于其他脚本并且您应该以正确的顺序使用它们，请使用“延迟”。例如首先是 jQuery（延迟），然后是所有需要 jQuery 的 jQuery 插件。但永远不要将“异步”设置为 jQuery，因为一旦加载，它将在任何不可预测的地点/时间执行。

***.com/a/68929270/7186739

【参考方案1】：

如果您同时指定两者，async 在现代浏览器上优先，而支持defer 但不支持async 的旧浏览器将回退到defer。

对于支持表，请检查 caniuse.com 中的 async 和 defer。

---

P/s：这些属性只有在页面的head 部分使用脚本时才有意义，如果将脚本放在body 页脚中，它们就没有用了。

【讨论】：

那么现代浏览器，比如 Chrome，会在遇到它们时将脚本视为延迟或异步吗？

async。需要明确的是，如果设置了 async 并且异步加载了脚本，则会忽略 defer。如果两者都存在并且浏览器仅支持defer，那么它将回退到defer 行为。