同时使用async和defer属性的<script>标签有什么作用？

嘿，这个问题问到点子上了！很多开发者都会对这俩属性的组合感到困惑，我来给你讲明白到底咋回事。

首先快速回顾下单独使用时的核心逻辑：

• async：脚本在后台异步下载，下载完成后立刻暂停HTML解析，执行脚本；多个async脚本的执行顺序由下载完成时间决定，和页面中的顺序无关。
• defer：脚本在后台异步下载，等整个HTML文档解析完成（触发DOMContentLoaded之前）再执行；多个defer脚本会严格按照它们在页面中的先后顺序执行。

那当你同时给<script>加上async和defer的时候，按照HTML规范，async的优先级更高，浏览器会完全按照async的规则来处理这个脚本，defer的行为会被忽略。

具体表现为：

• 脚本依然会在后台异步下载，不阻塞HTML解析（这点和单独用两者都一样）；
• 一旦脚本下载完成，会立刻中断当前的HTML解析流程，执行该脚本——完全跳过了defer“等HTML解析完再执行”的逻辑；
• 如果你有多个同时带async+defer的脚本，它们的执行顺序依然是“谁先下载完谁先跑”，和它们在DOM中的排列顺序没有必然联系。

举个直观的例子：

<script src="slow-script.js" async defer></script>
<script src="fast-script.js" async defer></script>

假设fast-script.js下载速度更快，那么它会先执行，哪怕它在页面里排在slow-script.js后面——这就是async的典型特征，而defer的顺序保障在这里完全失效。

需要注意的是，现在主流浏览器（Chrome、Firefox、Edge、Safari）都严格遵循这个规范，只有一些非常老旧的浏览器可能有不一致的处理逻辑，现代前端开发场景下基本不用考虑这些情况。

内容的提问来源于stack exchange，提问作者AngryHacker