不加 async 或 defer 的 script 会同步下载执行，阻塞 HTML 解析和渲染；async 异步下载并立即执行，不保证顺序；defer 异步下载并在 DOM 解析完成后按序执行。
script 标签不加 async 或 defer 时会发生什么
浏览器遇到 <script> 标签默认会立即下载并**同步执行**，阻塞 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，但执行时机在下载完成瞬间
<script async src="https://cdn.example.com/analytics.js"></script> <script async src="https://cdn.example.com/ad.js"></script>
defer 脚本的执行时机和限制
defer 表示“异步下载 + 等待 DOM 解析完成后再按顺序执行”。它**不阻塞解析**，但**保持执行顺序**，且只对**外部脚本**生效（src 属性必须存在）。
这是最安全的优化方式之一，适合大多数初始化逻辑：Vue/React 应用入口、表单校验、交互组件挂载等。
- 多个
defer脚本严格按 HTML 中出现顺序执行 - 执行时机在
DOMContentLoaded事件触发前，但 DOM 已构建完毕 - 不支持内联脚本：
<script defer>console.log('hi')</script>中的defer会被忽略 - 在 Safari 10.1 之前，
defer对动态插入的<script>不生效
<script defer src="https://cdn.example.com/utils.js"></script> <script defer src="https://cdn.example.com/app.js"></script>
async 和 defer 同时写会发生什么
当 async 和 defer 同时出现在一个 <script> 标签中，现代浏览器（Chrome/Firefox/Safari/Edge）会**优先采用 async 行为**——即下载完立刻执行，忽略 defer 的顺序保证。
这不是标准推荐写法，属于冗余且易引发误解的配置。HTML5 规范明确说明：async 的优先级高于 defer。
- 不要这样写：
<script async defer src="a.js"></script> - 如果需要顺序执行，只用
defer；如果需要尽快执行且无依赖，只用async - 某些老旧工具链（如部分 Webpack 插件）可能自动注入双属性，需检查输出 HTML 并手动清理
async 脚本里，又没加 DOMContentLoaded 或 document.readyState 判断——结果是脚本偶尔执行成功、偶尔报错，难以复现。 
