defer能保证dom就绪且脚本按序执行，但仅对外部脚本（含src属性）生效；内联脚本加defer被忽略，混用async会破坏顺序，多个defer脚本必须严格按html书写顺序排列以满足依赖关系。
用 defer 就能保证 DOM 就绪、脚本按序执行，但前提是：它只对带 src 的外链脚本生效，且多个 defer 脚本必须严格按 HTML 中的书写顺序排列——错一个位置或混进 async，整个依赖链就断了。
为什么 document.getElementById 报 null？一定是 defer 没生效或用错了
典型现象是控制台没报错，但按钮没响应、Canvas 初始化失败、Vue 实例没挂载。这不是代码写错了，而是脚本在 还没解析完时就执行了。此时 document.getElementById('app') 返回 null，后续逻辑静默跳过。
- 检查是否用了内联脚本：
<script defer>init();</script>——defer对它完全无效，浏览器直接忽略该属性 - 确认脚本是否真有
src：<script src="app.js" defer></script>才合法；src缺失或为空字符串，等同于同步阻塞 - 排查构建工具干扰：Vite 默认注入的脚本常带
async，手动加defer会被插件覆盖；需检查vite-plugin-html模板或配置build.rollupOptions.output.entryFileNames是否影响注入逻辑
多个 defer 脚本怎么排顺序？顺序就是依赖关系本身
你写的顺序，就是浏览器执行的顺序。这不是建议，是 defer 的强制契约。比如 jQuery 插件必须等 jQuery 加载完，那它们在 HTML 里就得这么写：
<script src="jquery.min.js" defer></script><script src="jquery.plugin.js" defer></script><script src="main.js" defer></script>
- 不能把
main.js放最前——哪怕它体积小，执行快，defer也会等前两个下载并执行完才轮到它 - 严禁和
async混用：<script src="a.js" async></script><script src="b.js" defer></script>中，a.js可能在DOMContentLoaded前任意时刻执行，b.js却卡到最后，导致b调用a里的函数时报ReferenceError - ES 模块脚本（
type="module"）天然具备defer行为，无需重复加；但若混用nomodule回退脚本，要确保两者逻辑隔离，避免竞态
defer 脚本加载失败怎么办？它不处理错误，只管顺序
defer 不提供 fallback、不重试、不降级。404 或 CORS 失败时，脚本加载中断，控制台报错，但页面其余部分照常运行——除非你的业务逻辑强依赖这个脚本，否则用户根本察觉不到问题。
- 跨域脚本必须加
crossorigin：<script src="https://cdn.example.com/lib.js" defer crossorigin></script>，否则错误堆栈为空，无法定位是哪一行出的问题 - 第三方 SDK（如统计脚本）别盲目
defer：它们通常无 DOM 依赖，更适合async；更优做法是监听首次交互（click或scroll）后再动态插入<script src="analytics.js"></script> - 大体积库（如
echarts.min.js）若只在某个模块中用，defer仍会首屏加载——应改用import()动态导入，在用户点击对应 tab 时才加载
真正容易被忽略的是：defer 解决了“什么时候执行”，但没回答“要不要执行”和“执行失败了怎么办”。DOM 就绪了，不代表接口已返回、图片已解码、WebGL 上下文已创建——这些都得靠运行时判断和兜底逻辑来补足。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
