通过 html 的 `defer` 属性，可在不阻塞页面解析的前提下并行下载多个脚本，并严格按声明顺序执行，完美解决依赖场景（如 two.js 依赖 one.js）而无需手动缓存响应或使用 `eval`。
在 Web 开发中，常需加载具有执行依赖关系的外部脚本（例如 two.js 依赖 one.js 中定义的函数或变量），同时又希望充分利用网络并发能力——即并行下载以减少总延迟，而非串行请求。手动用 fetch + eval（或 Function 构造器）虽可行，但存在严重缺陷：绕过浏览器脚本缓存、破坏 CSP（Content Security Policy）、丧失错误堆栈信息、难以调试，且违背现代前端工程最佳实践。
更安全、标准且高效的方案是使用原生 <script> 标签的 defer 属性：</script>
<script defer src="one.js"></script> <script defer src="two.js"></script>
✅ 工作原理简析：
- 所有带 defer 的脚本会并行发起 HTTP 请求（浏览器底层优化，不受 DOM 顺序影响）；
- 下载过程不阻塞 HTML 解析与 DOM 构建；
- 所有 defer 脚本会在 DOMContentLoaded 事件触发前，按其在 HTML 中出现的顺序依次执行（即 one.js 必先于 two.js 运行）；
- 若脚本已缓存，仍保持顺序，且复用缓存资源。
⚠️ 注意事项：
立即学习“Java免费学习笔记（深入）”；
- defer 仅对外部脚本（含 src 属性）生效，内联脚本不支持；
- 不可用于动态创建的 <script> 元素（document.createElement('script')），除非显式设置 defer = true 并插入到文档中； </script>
- 与 async 互斥：async 脚本无执行顺序保证，适用于完全独立的脚本（如分析统计）；
- 确保 one.js 和 two.js 均为纯逻辑脚本（无 document.write 等副作用），因 defer 脚本执行时 DOM 已就绪。
? 进阶提示（现代替代方案）：
若需运行时动态控制加载（如按条件加载、错误重试、加载状态反馈），可结合 import() 动态导入（ES 模块）：
// one.js 和 two.js 需导出明确接口
async function loadSequentially() {
await import('./one.js');
await import('./two.js'); // 自动等待 one.js 执行完成
}
loadSequentially();该方式支持 Promise 控制流、错误捕获与 Tree-shaking，但要求模块化环境及服务端支持 MIME 类型 application/javascript。
综上，对于静态声明的依赖脚本，<script defer> 是最简洁、兼容性好（IE10+）、语义清晰的标准解法；动态场景则优先选用 import()。避免 eval、setTimeout 轮询或手动响应缓存等反模式。</script>
