17370845950

不加 async 或 defer 的 script 会同步下载执行，阻塞 HTML 解析和渲染；async 异步下载并立即执行，不保证顺序；defer 异步下载并在 DOM 解析完成后按序执行。

script 标签不加 async 或 defer 时会发生什么

浏览器遇到 标签默认会立即下载并**同步执行**，阻塞 HTML 解析和后续资源加载。这意味着：DOM 构建暂停、页面渲染延迟、首屏时间变长。

常见错误现象：Uncaught ReferenceError: $ is not defined（jQuery 在 DOM 加载前执行）、页面白屏时间明显拉长、Lighthouse 报告提示“Render-blocking resources”。

• 适用于必须在 DOM 构建前运行的脚本（如 polyfill、早期埋点初始化）
• 但绝大多数业务脚本都不需要这种阻塞行为
• 若脚本无 document.write() 且不依赖 DOM，强行同步加载纯属浪费性能

async 脚本何时下载和执行

async 表示“异步下载 + 下载完立即执行”，与 HTML 解析**完全独立**。它不保证执行顺序，也不等待 DOM 就绪。

典型使用场景：统计 SDK（如百度统计、神策）、广告脚本、不依赖 DOM 和其他脚本的独立功能模块。

• 多个 async 脚本的执行顺序不确定，即使它们在 HTML 中先后出现
• 如果脚本 A 依赖脚本 B 的全局变量，async 可能导致 ReferenceError
• Chrome DevTools 的 Network 面板中，async 脚本的 Initiator 显示为 parser，但执行时机在下载完成瞬间

defer 脚本的执行时机和限制

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

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

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

async 和 defer 同时写会发生什么

当 async 和 defer 同时出现在一个 标签中，现代浏览器（Chrome/Firefox/Safari/Edge）会**优先采用 async 行为**——即下载完立刻执行，忽略 defer 的顺序保证。

这不是标准推荐写法，属于冗余且易引发误解的配置。HTML5 规范明确说明：async 的优先级高于 defer。

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

实际项目中最容易被忽略的是：把依赖 DOM 的初始化代码放在 async 脚本里，又没加 DOMContentLoaded 或 document.readyState 判断——结果是脚本偶尔执行成功、偶尔报错，难以复现。