第三方脚本标签中async与defer的性能影响对比

核心行为差异 #

async 特性 #

• 脚本下载阶段不阻塞页面解析
• 下载完成后立即执行，执行过程会阻塞页面解析
• 多个带async的脚本执行顺序不固定，完全取决于下载完成的先后

defer 特性 #

• 脚本下载阶段不阻塞页面解析
• 页面解析完成后、DOMContentLoaded 事件触发前执行
• 多个带defer的脚本严格按照它们在HTML中的出现顺序执行

关于性能与主流选择的疑问解答 #

你提到的defer对性能影响更低的思路没错，但async能成为现代场景的主流选择，核心原因在于：

1. 执行时机更早：如果脚本不需要依赖DOM结构或其他脚本（比如统计埋点、独立SDK），async能让脚本在下载完成后立刻执行，不用等到页面完全解析完毕，这类脚本早执行就能更早完成初始化，不会拖慢功能就绪时间。
2. 无依赖场景下效率更高：现代很多第三方脚本都是独立无依赖的，不需要遵循固定执行顺序，async的并行下载+即时执行模式能最大化利用浏览器的网络资源，不会因为等待其他脚本而浪费时间。

至于为什么会同时写async和defer，本质是兼容老版本浏览器：早期IE（比如IE9及以下）不支持async属性，但支持defer，这样写的话，现代浏览器会优先识别async，老浏览器则会自动降级到defer，保证脚本始终能异步加载，避免阻塞页面解析。

如果你的场景下两者都适用（脚本无DOM依赖、无顺序要求），选择哪个要看具体需求：

• 追求脚本尽早执行，选async
• 需要保证脚本在DOM准备就绪后执行，或者有顺序依赖，选defer

所谓“性能影响”不能一概而论：async执行时的阻塞通常非常短暂（毕竟脚本下载完成时，页面大概率已经解析了大部分），而defer虽然不阻塞解析，但执行时机更晚，对于需要快速响应的功能来说，反而可能影响用户体验。

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