JS动态加载脚本_Defer与Async区别

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 的差异，能帮助你在不同场景下做出更合理的脚本加载策略选择，提升页面响应速度和用户体验。