defer只保证脚本在html解析完成、domcontentloaded前执行，不等待资源加载或动态内容渲染，故操作未初始化的dom节点会失败。
script 标签加 defer 属性后为什么还是执行太早？
加了 defer 的 <script></script> 确实会等 HTML 解析完成再执行，但「文档解析完成」指的是 DOMContentLoaded 事件触发前的 DOM 构建结束，不保证所有资源（比如图片、iframe）加载完毕，也不代表你依赖的某个 DOM 节点已具备完整结构（例如由第三方库动态注入的内容还没来得及挂载）。
常见错误现象：document.getElementById('main') 返回 null，或操作 querySelectorAll('.item') 拿不到预期节点——不是 defer 失效，而是你的脚本执行时，目标元素虽在 DOM 中，但尚未被 JS 初始化/渲染完成。
-
defer只保证脚本在 HTML 解析完、DOMContentLoaded前执行，不等待load事件 - 多个
defer脚本按出现顺序执行，但无法控制它们与外部框架（如 Vue.mount、React.render）的时序关系 - 如果脚本依赖某个由
async加载的模块（如动态import()），defer本身不解决依赖链延迟问题
什么时候该用 defer，什么时候该监听 DOMContentLoaded？
用 defer 的前提是：脚本只操作静态 HTML 中已存在的元素，且不依赖其他 JS 模块的初始化结果。一旦涉及框架挂载、Web Component 升级、或需要确保「可视区域内容就绪」，就得主动监听事件。
- 纯 DOM 查询 + 绑定事件（如表单校验、导航高亮）→
defer通常够用 - 调用
new Chart(...)渲染 canvas、操作ShadowRoot、等待customElements.define完成 → 必须用DOMContentLoaded或更稳妥的requestIdleCallback - 脚本本身是模块（
type="module"），默认行为类似defer，无需额外加属性；但模块内仍需自行判断 DOM 就绪状态
示例：即使用了 defer，安全写法仍是
document.addEventListener('DOMContentLoaded', () => {
const el = document.getElementById('chart-container');
if (el) new Chart(el, { /* config */ });
});
defer 和 async 混用时的执行陷阱
同一页面中同时存在 defer 和 async 脚本时，执行顺序不可控：async 脚本一下载完就执行（可能早于 DOM 解析完），而 defer 脚本严格排队。这会导致依赖关系错乱。
- 不要让
defer脚本假设某个async脚本（如 CDN 上的工具库）已经执行完毕 - 若必须加载外部库，优先用
defer+crossorigin（避免因 CORS 导致的执行中断），或改用动态import()显式声明依赖 - 检查浏览器控制台是否有
Uncaught ReferenceError: $ is not defined—— 这往往是 jQuery 被async加载，而你的defer脚本已开始执行所致
真正保险的「文档解析完成后再执行」方案
别只靠 HTML 属性，要结合运行时判断。最简健壮做法是：先用 defer 确保不阻塞解析，再在脚本内部做双重检查。
- 用
document.readyState === 'interactive'或'complete'判断当前阶段 - 对关键节点使用
document.querySelector+mutationObserver回退（适用于动态插入内容） - 复杂场景下，把初始化逻辑包裹进
queueMicrotask或setTimeout(fn, 0)，确保在当前任务队列末尾执行（避开渲染管线中的中间状态）
例如：
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
// DOM 已就绪，但可能刚经历一次 innerHTML 替换，稍等一帧再操作
queueMicrotask(init);
}
真实项目里，DOM 就绪只是起点，后续还要考虑 SSR 注水、hydration 同步、CSS 加载阻塞渲染等问题——这些都不会被 defer 自动处理。
