JS动态加载脚本_Defer与Async区别_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

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

2025-11-17

浏览次数：次

返回列表

defer和async均异步加载脚本但执行时机不同：defer脚本在HTML解析完成后按顺序执行，适合有依赖关系的外部脚本；async脚本下载后立即执行，顺序不确定，适用于独立脚本；动态创建script时默认异步，可通过设置属性模拟两者行为。

js动态加载脚本_defer与async区别

在网页开发中，J*aScript 的加载方式对页面性能和用户体验有重要影响。当需要动态加载外部脚本时，defer 和 async 是两个关键属性，它们控制脚本的下载和执行时机。虽然两者都能实现异步加载，但行为上有本质区别。

Defer：延迟执行，保持顺序

带有 defer 属性的脚本会异步下载，但不会立即执行。它会等到整个 HTML 文档解析完成（DOMContentLoaded 事件触发前）才按顺序执行。

特点：

ChatCut

AI视频剪辑工具

1086 查看详情

脚本异步下载，不阻塞页面解析
所有 defer 脚本按声明顺序执行
在 DOM 解析完成后、DOMContentLoaded 事件前执行
只对外部脚本有效（即有 src 属性的 script）

适合场景：多个依赖彼此的 JS 文件，比如库 + 插件组合，需要按顺序加载且不阻塞渲染。

Async：异步加载，执行时机不确定

带有 async 属性的脚本也是异步下载，但一旦下载完成，会立即中断 HTML 解析来执行脚本。

特点：

脚本异步下载，不阻塞解析
下载完成后立即执行，执行顺序不可控
执行时机可能在 DOM 解析中或结束后
也只对外部脚本有效

适合场景：独立脚本，如统计代码、广告脚本，不需要等待其他脚本，也不被其他脚本依赖。

动态加载中的 defer 与 async

通过 J*aScript 动态创建 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 解析完成后执行	下载完成后立即执行
执行顺序	按脚本顺序执行	谁先下完谁先执行
适用场景	有依赖关系的脚本	独立、无依赖的脚本