defer仅对外部脚本（含src属性）生效，执行于DOM构建完成之后、DOMContentLoaded之前，按HTML顺序执行；内联脚本加defer无效，async与defer不可混用，且defer不推迟下载仅推迟执行。
defer 属性确实能延迟外部脚本执行，但它的行为有明确边界：只对带 src 的外部脚本生效，且执行时机固定在 DOM 构建完成之后、DOMContentLoaded 之前。加了 defer 却没效果？大概率是脚本写错了位置或类型。
defer 只对外部脚本有效，内联脚本加了也白加
浏览器会直接忽略 <script defer>console.log('hi')</script> 中的 defer——既不延迟，也不报错，就当没写。真正触发 defer 行为的唯一条件是：src 属性存在 + defer 属性存在。
- ✅ 正确写法：
<script src="app.js" defer></script> - ❌ 错误写法：
<script defer>init();</script>（内联脚本） - ❌ 错误写法：
<script src="app.js" defer="false"></script>（defer是布尔属性，不能赋值）
defer 脚本执行时机：DOM 就绪后、DOMContentLoaded 前
这个时间点很关键——你能在 defer 脚本里安全调用 document.querySelector、document.body.appendChild，不需要再套一层 DOMContentLoaded 监听。但它不等图片、样式表这些资源，所以别指望它比 window.onload 更晚。
- 执行顺序严格按 HTML 中出现顺序，多个
defer脚本不会乱序 - 如果页面里混着非
defer脚本（比如async或内联脚本），它们可能提前改 DOM，导致defer脚本看到的是“被动过”的 DOM 状态 -
defer脚本里禁止用document.write()，否则静默失败或直接报错
defer 和 async 别混用，它们解决的是不同问题
两者都“不阻塞 HTML 解析”，但目标完全不同：defer 是为了等 DOM 就绪后按序执行；async 是为了谁先下载完谁先跑，完全不管顺序和 DOM。
- 依赖 DOM 或模块间有调用关系？选
defer - 统计代码、广告 SDK、纯工具函数？选
async - 同时写了
async和defer？浏览器以async为准，defer被忽略 - 想控制加载时机到毫秒级（比如滚动到某区域才加载）？
defer不够用，得用动态创建script标签 +IntersectionObserver
常见失效场景：路径、加载顺序、执行依赖全得对上
defer 不是“加了就万事大吉”的开关。如果脚本本身依赖另一个尚未加载的库（比如先 defer 加载 utils.js，后加载 main.js，但 main.js 里直接用了 utils.js 的函数），照样报 ReferenceError。
- 确保所有依赖脚本都声明
defer，且按依赖顺序书写（A 依赖 B，则 B 写在 A 前面） - 检查
src路径是否 404，defer不改变网络请求失败逻辑 - 服务端开启 HTTP/2 或使用资源提示（如
<link rel="preload">）可加速下载，但不影响defer的执行时序
最常被忽略的一点：defer 控制的是“执行时机”，不是“下载时机”。它从解析 HTML 开始就并行下载，只是压着不执行。如果你真想推迟下载（比如等用户交互后再拉脚本），那就得切到动态创建 script 标签这条路。
