HTML script标签的async与defer属性是否互斥？谷歌文档为何同时使用二者？

首先明确：同时在<script>标签中使用async和defer是合法的，并非不能同时使用，谷歌文档这么写是出于兼容性和性能兼顾的考虑。

核心行为逻辑 #

当一个脚本标签同时包含async和defer时：

• 现代浏览器（支持async的浏览器）会优先采用async的行为：脚本在后台异步加载，加载完成后立刻执行（此时DOM可能还在解析中），这和单独使用async的效果完全一致。
• 仅支持defer的旧浏览器（如部分老版本IE）会忽略async，退化为defer的行为：脚本异步加载，等待整个DOM解析完成后，再按脚本在页面中的顺序执行。

谷歌文档这么要求的原因 #

谷歌的GSI（Google Identity Services）脚本本身是独立无依赖的，且内部已经做了适配：不管是在DOM解析完成前还是后执行，脚本都能正确初始化并绑定相关功能。同时添加两个属性，既能让现代浏览器享受到async带来的并行加载、尽早执行的性能优势，又能确保旧浏览器环境下脚本的正确加载执行，最大化兼容不同用户的浏览器场景。

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