defer仅对带src属性的外部脚本生效，内联脚本加defer会被忽略；其执行时机在DOM构建完成但资源未加载完时，按HTML顺序执行，不处理404或CSP等错误。
defer只对外部脚本生效，内联脚本加了也白加
浏览器会完全忽略 <script defer>console.log('hi')</script> 里的 defer——既不延迟执行，也不报错，就当没写。真正起作用的唯一组合是：必须带 src 属性 + 显式写出 defer（无值）。
常见错误写法包括：
• <script src="app.js" defer="false"></script>（defer 是布尔属性，赋值会被忽略，实际仍启用）
• <script defer></script>（无 src，直接失效）
• 构建工具生成的内联代码（如 Vite 的 inlineDynamicImports: true），哪怕你手写了 defer，最终 HTML 里是 <script>...</script>，它就彻底没用
defer脚本执行时机：DOM已就绪，但别指望资源加载完
defer 脚本在 HTML 解析完成、DOM 树构建完毕后立即执行，早于 DOMContentLoaded 事件触发，但晚于 DOM 构建过程本身。这意味着你可以放心调用：
• document.getElementById("canvas")
• document.querySelector("main")
• document.body.appendChild(...)
但它不等图片、CSS、字体、iframe 或 fetch 请求完成，所以：
• 不要依赖 window.onload 或 load 事件的时机
• 不要假设 <img src="logo.png"> 已渲染完毕
• 如果脚本里用了 document.write()，defer 会被浏览器静默忽略或直接报错（现代代码应改用 insertAdjacentHTML）
多个defer脚本按HTML顺序执行，顺序写错就ReferenceError
执行顺序严格按 <script> 标签在 HTML 中的出现位置，与下载快慢无关。比如：<script src="lodash.js" defer></script><script src="app.js" defer></script>
即使 app.js 先下载完，也一定等 lodash.js 执行完才运行。
但如果你把顺序写反了：
• <script src="app.js" defer></script> 在前
• <script src="lodash.js" defer></script> 在后
那 app.js 执行时 _ 还未定义，必然报 ReferenceError: _ is not defined。
还要注意：
• 混用 async 和 defer（如 <script src="a.js" async defer></script>）会导致 defer 被静默丢弃，浏览器按 async 规则处理
• 服务端注入的初始化数据（如 window.__INITIAL_STATE__）必须放在所有 defer 脚本之前，且自身不能加 defer，否则后续脚本读不到
defer不是错误兜底机制，404或CSP失败照样卡住
defer 只控制“什么时候执行”，不管“执行成不成”。路径 404、CSP 策略拦截、模块内部 import() 失败、语法错误……这些都不会被 defer 拦住或重试。
它不会：
• 自动 fallback 到备用 CDN
• 重试下载失败的脚本
• 捕获并跳过某一个 defer 脚本的运行时错误（错误发生后，后续 defer 脚本仍会继续执行，但逻辑可能已断裂）
真正容易被忽略的是：你看到 DOM 元素存在了，不代表脚本里的模型文件、配置 JSON 或动态 import() 已就绪——defer 保证 DOM 就绪，不保证任何异步资源就绪。
立即学习“前端免费学习笔记（深入）”；
