通过 `
在前端开发中，常需兼顾资源加载性能与执行依赖关系：例如 two.js 依赖 one.js 中定义的函数或变量，必须确保 one.js 先执行完毕，但又不希望因串行请求拖慢整体加载速度。传统方案（如用 fetch + eval）虽可行，却存在严重隐患——eval 执行远程脚本会绕过 CSP 策略、丧失调试能力、引发 XSS 风险，且无法利用浏览器原生的脚本缓存与预解析优化。
推荐的标准解法是使用 HTML
✅ 工作原理：
- 浏览器在解析 HTML 时立即发起两个脚本的并行 HTTP 请求（不阻塞 DOM 解析）；
- 下载完成后，脚本被暂存，不立即执行；
- 待整个 HTML 解析完成、DOM 构建就绪（即触发 DOMContentLoaded 事件前），浏览器按标签出现顺序依次执行所有 defer 脚本；
- 执行时机早于 window.onload，但晚于 DOM 就绪，天然适合操作 DOM 的初始化逻辑。
⚠️ 注意事项：
立即学习“Java免费学习笔记（深入）”；
- defer 仅对外部脚本（带 src 属性）生效，内联脚本不支持；
- 必须将
- 不适用于动态插入的脚本（如 document.createElement('script')），此时需配合 Promise.all() + import() 动态导入（ES Modules 方案）；
- 兼容性极佳：Chrome 8+、Firefox 4+、Safari 5.1+、Edge 10+ 均原生支持。
对于现代项目，若已采用模块化架构，也可结合 type="module"（默认具有类似 defer 行为）与动态 import() 实现更精细的控制：
// 按需顺序加载模块（支持 Promise 链式调用）
await import('./one.js');
await import('./two.js'); // 确保 one.js 执行完毕后再加载 two.js但对简单依赖场景，
