网页延迟加载脚本，Defer属性详解

本文深入解析了HTML中defer属性的核心机制与实战陷阱，明确指出它仅对外部脚本（含src）生效、在DOM构建完成但DOMContentLoaded事件触发前按序执行，既不阻塞解析也不推迟下载；同时澄清常见误区——内联脚本加defer无效、async与defer不可共存、执行顺序严格依赖HTML书写顺序，并强调defer无法解决依赖缺失、路径错误或动态加载需求等问题，帮助开发者精准掌控脚本执行时机，避免“加了却没用”的调试困境。

defer 属性确实能延迟外部脚本执行，但它的行为有明确边界：只对带 src 的外部脚本生效，且执行时机固定在 DOM 构建完成之后、DOMContentLoaded 之前。加了 defer 却没效果？大概率是脚本写错了位置或类型。

defer 只对外部脚本有效，内联脚本加了也白加

浏览器会直接忽略 中的 defer——既不延迟，也不报错，就当没写。真正触发 defer 行为的唯一条件是：src 属性存在 + defer 属性存在。

• ✅ 正确写法：
• ❌ 错误写法：（内联脚本）
• ❌ 错误写法：（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 或使用资源提示（如 ）可加速下载，但不影响 defer 的执行时序

最常被忽略的一点：defer 控制的是“执行时机”，不是“下载时机”。它从解析 HTML 开始就并行下载，只是压着不执行。如果你真想推迟下载（比如等用户交互后再拉脚本），那就得切到动态创建 script 标签这条路。

以上就是《网页延迟加载脚本，Defer属性详解》的详细内容，更多关于的资料请关注golang学习网公众号！