为何要同时为第三方脚本使用async和defer属性？

没错，async和defer本来是针对不同场景设计的，但同时用这种写法，核心目的就是兼容老旧浏览器，同时兼顾现代浏览器的加载效率。

具体来说：

• 对IE9及更早的旧浏览器来说，它们不支持async属性，但能识别defer。加了两个属性后，旧浏览器会直接忽略async，按defer的逻辑处理——脚本在后台下载，不阻塞HTML解析，等整个DOM解析完再执行，避免页面卡顿。
• 现代浏览器（像Chrome、Firefox、Edge这些）会优先识别async，自动忽略defer。这时候脚本会异步下载，一下载完就立刻执行（不用等DOM解析完），刚好适合那些不需要依赖DOM、也不影响页面渲染的第三方脚本，比如统计代码、广告插件这类。
• 第三方脚本的开发者没法预判用户用什么浏览器，同时加两个属性能最大化覆盖所有用户：新用户能享受到async的高效加载，旧用户也能正常加载脚本不翻车。

再明确下两者的核心区别，方便理解：

• async：下载和HTML解析同时进行，下载完成立刻执行（可能打断正在进行的DOM解析）
• defer：下载和HTML解析同时进行，下载完成后等DOM全解析完再执行（还会按脚本在页面里的顺序执行）

所以这种写法不是混淆场景，而是一种实用的向下兼容方案，专门给第三方脚本这种需要适配各种环境的场景用的。

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