HTML5中async与defer区别详解

defer 表示“异步下载 + 等待 DOM 解析完成后再按顺序执行”。它**不阻塞解析**，但**保持执行顺序**，且只对**外部脚本**生效（src 属性必须存在）。

这是最安全的优化方式之一，适合大多数初始化逻辑：Vue/React 应用入口、表单校验、交互组件挂载等。

• 多个 defer 脚本严格按 HTML 中出现顺序执行
• 执行时机在 DOMContentLoaded 事件触发前，但 DOM 已构建完毕
• 不支持内联脚本： 中的 defer 会被忽略
• 在 Safari 10.1 之前，defer 对动态插入的

  async 和 defer 同时写会发生什么

  当 async 和 defer 同时出现在一个

• 如果需要顺序执行，只用 defer；如果需要尽快执行且无依赖，只用 async
• 某些老旧工具链（如部分 Webpack 插件）可能自动注入双属性，需检查输出 HTML 并手动清理