async与defer加载顺序解析

本文深入解析了HTML中async与defer属性的核心差异：async脚本下载完成后立即无序执行，不等待DOM就绪，适合彼此独立、无需操作DOM的场景（如埋点统计）；而defer脚本虽也异步下载，却严格按书写顺序在HTML解析完成、DOM构建就绪后统一执行，确保依赖关系和DOM可操作性，适用于初始化组件或有调用链路的业务逻辑。两者均避免阻塞页面渲染，是现代前端性能优化的关键手段——读懂它们的执行时机与行为边界，能帮你精准控制脚本加载策略，彻底告别“undefined is not a function”或“element is null”的线上陷阱。

当页面中引入多个外部 JavaScript 脚本时，async 和 defer 会显著影响脚本的下载与执行时机，进而改变代码实际运行顺序。它们都不阻塞 HTML 解析（即不会像默认 script 那样“暂停渲染”），但关键区别在于：async 是“下载完就立刻执行”，而 defer 是“等整个 HTML 解析完、DOM 构建完成后再按书写顺序执行”。

async：无序、独立、尽早执行

带有 async 的脚本会异步下载，下载完成后**立即执行**，不保证执行顺序，也不等待 DOM 就绪或其它脚本。

• 多个 async 脚本之间**无执行先后保障**——谁先下载完谁先执行，哪怕后写的 script 标签先加载完，也会先执行
• 它不关心 DOM 是否解析完毕，执行时 DOM 可能还不完整（比如 document.getElementById 可能返回 null）
• 适合相互无关、无需操作 DOM 或依赖其它脚本的场景，例如埋点统计、广告 SDK

defer：有序、延迟、DOM 就绪后执行

带有 defer 的脚本也是异步下载，但会**等到整个 HTML 文档解析完成（DOMContentLoaded 触发前）再按 script 标签出现的顺序依次执行**。

• 多个 defer 脚本严格遵循 HTML 中的书写顺序执行，即使后一个脚本下载更快，也必须等前一个执行完
• 执行时 DOM 已构建完毕，可安全操作元素（如查询、绑定事件）
• 适合有依赖关系、需操作 DOM 的模块化脚本，例如初始化组件、表单校验逻辑

与普通 script（无属性）的对比

默认 script 会同步下载并立即执行，阻塞 HTML 解析，因此 DOM 构建会中断；而 async/defer 都避免了这种阻塞，是现代页面优化的常用手段。

• 无属性 script：下载 + 执行 → 暂停解析 → 继续
• async：下载（不阻塞）→ 下载完立即执行（可能打断解析）→ 不保证顺序
• defer：下载（不阻塞）→ 解析完 HTML → 按序执行（不打断解析）

实际使用建议

选哪个取决于脚本用途和依赖关系：

• 只做数据上报、第三方分析，且彼此无调用关系 → 用 async
• 需要操作 DOM，或多个脚本存在执行依赖（如 A 初始化工具函数，B 使用该函数）→ 用 defer
• 内联脚本（）不支持 async/defer，若需延迟执行，应包裹在 DOMContentLoaded 或 load 事件中
• 同一个 script 标签上同时写 async 和 defer，浏览器会优先采用 async（defer 被忽略）

终于介绍完啦！小伙伴们，这篇关于《async与defer加载顺序解析》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！