通过 `<script defer>` 属性，可在并行下载脚本的同时严格按 html 中声明顺序执行，无需手动缓存响应或使用 `eval`，安全、标准且兼容性良好。</script>
在 Web 开发中，常需加载多个相互依赖的 JavaScript 脚本（如 one.js 初始化核心模块，two.js 依赖其导出的函数或变量）。理想方案是：网络层并行下载以提升性能，执行层严格串行以保障依赖正确性。过去开发者可能采用 fetch + eval 或 Promise 链手动控制，但这类方式存在严重缺陷——eval 触发 CSP 策略拦截、破坏作用域隔离、难以调试，且手动管理加载状态易出错。
现代标准推荐使用原生 <script defer> 属性，它完美契合该场景：
- ✅ 并行下载：浏览器会同时发起 one.js 和 two.js 的 HTTP 请求，不阻塞 HTML 解析；
- ✅ 顺序执行：即使 two.js 先下载完成，也会等待 one.js 执行完毕后再运行，执行顺序严格遵循 DOM 中 <script> 标签的出现顺序；
- ✅ 时机可控：所有 defer 脚本均在 DOM 构建完成（DOMContentLoaded）后、window.onload 前执行，确保 DOM 可用；
- ✅ 零侵入、高兼容：支持所有现代浏览器及 IE10+，无需额外 JS 逻辑。
<!-- 正确示例：声明即生效 --> <script defer src="one.js"></script> <script defer src="two.js"></script>
⚠️ 注意事项：
- defer 仅对外部脚本（带 src 属性）生效，内联脚本不支持；
- 不可与 async 同时使用（后者会忽略执行顺序）；
- 若脚本需在 DOM 就绪前执行（如早期 DOM 操作），defer 不适用，应改用 document.write（不推荐）或动态插入 + onload 监听（需自行保序）；
- 确保 one.js 和 two.js 中无 document.write，否则会清空页面。
总结：<script defer> 是解决“异步下载 + 顺序执行”问题的标准、安全、高效方案。相比 fetch + eval 或手工 Promise 链，它由浏览器原生保障语义正确性，大幅降低维护成本与安全风险。
立即学习“Java免费学习笔记（深入）”；
