defer和async均异步加载脚本但执行时机不同：defer脚本在HTML解析完成后按顺序执行，适合有依赖关系的外部脚本；async脚本下载后立即执行，顺序不确定，适用于独立脚本；动态创建script时默认异步，可通过设置属性模拟两者行为。
在网页开发中，JavaScript 的加载方式对页面性能和用户体验有重要影响。当需要动态加载外部脚本时，defer 和 async 是两个关键属性，它们控制脚本的下载和执行时机。虽然两者都能实现异步加载，但行为上有本质区别。
Defer：延迟执行，保持顺序
带有 defer 属性的脚本会异步下载，但不会立即执行。它会等到整个 HTML 文档解析完成（DOMContentLoaded 事件触发前）才按顺序执行。
特点：
- 脚本异步下载，不阻塞页面解析
- 所有 defer 脚本按声明顺序执行
- 在 DOM 解析完成后、DOMContentLoaded 事件前执行
- 只对外部脚本有效（即有 src 属性的 script）
适合场景：多个依赖彼此的 JS 文件，比如库 + 插件组合，需要按顺序加载且不阻塞渲染。
Async：异步加载，执行时机不确定
带有 async 属性的脚本也是异步下载，但一旦下载完成，会立即中断 HTML 解析来执行脚本。
特点：
- 脚本异步下载，不阻塞解析
- 下载完成后立即执行，执行顺序不可控
- 执行时机可能在 DOM 解析中或结束后
- 也只对外部脚本有效
适合场景：独立脚本，如统计代码、广告脚本，不需要等待其他脚本，也不被其他脚本依赖。
动态加载中的 defer 与 async
通过 JavaScript 动态创建 script 标签时，默认行为是异步的，相当于设置了 async="false"（即同步执行），但可以通过手动设置属性来模拟 defer 或 async 行为。
示例：
// 动态添加 async 脚本
const asyncScript = document.createElement('script');
asyncScript.src = 'analytics.js';
asyncScript.async = true;
document.head.appendChild(asyncScript);
// 动态添加 defer 脚本
const deferScript = document.createElement('script');
deferScript.src = 'app.js';
deferScript.defer = true; // 实际上动态脚本默认就类似 defer 行为
document.head.appendChild(deferScript);
注意：动态插入的脚本默认异步加载且不阻塞解析，即使不设 async 或 defer。若要确保顺序，需手动控制加载逻辑。
总结对比
| Defer | Async | |
|---|---|---|
| 下载行为 | 异步，不阻塞解析 | 异步，不阻塞解析 |
| 执行时机 | HTML 解析完成后执行 | 下载完成后立即执行 |
| 执行顺序 | 按脚本顺序执行 | 谁先下完谁先执行 |
| 适用场景 | 有依赖关系的脚本 | 独立、无依赖的脚本 |
基本上就这些。理解 defer 和 async 的差异，能帮助你在不同场景下做出更合理的脚本加载策略选择，提升页面响应速度和用户体验。
