在前端开发中，js怎么实现异步加载脚本直接影响页面的渲染速度和用户体验。传统的script标签会阻塞HTML解析，而异步加载可以让脚本在后台下载，不卡住页面。下面介绍几种主流的实现方式。
一、使用script标签的async和defer属性
在HTML中，可以直接通过属性控制脚本的加载行为。async表示脚本下载完成后立即执行，不保证顺序；defer表示脚本下载后等待文档解析完毕再按顺序执行。
<!-- 异步不保证顺序 --> <script src="https://ipipp.com/a.js" async></script> <!-- 延迟按顺序执行 --> <script src="https://ipipp.com/b.js" defer></script>
二、动态创建script元素
通过js动态生成script标签并插入页面，默认就是异步加载。这种方式适合按需加载模块或第三方SDK。
function loadScript(src, callback) {
var s = document.createElement('script');
s.src = src;
s.async = true;
s.onload = function() {
// 脚本加载完成后的回调
if (callback) callback();
};
document.head.appendChild(s);
}
// 调用示例
loadScript('https://ipipp.com/c.js', function() {
console.log('c.js 已加载');
});
三、使用ES6动态import
现代浏览器支持import()语法，可以在需要时异步加载js模块，返回Promise对象，便于控制依赖。
// 点击按钮后才加载模块
document.getElementById('btn').addEventListener('click', function() {
import('./module.js').then(function(mod) {
mod.run();
}).catch(function(err) {
console.error('加载失败', err);
});
});
四、方法对比
不同异步加载方式的特点如下：
| 方式 | 执行顺序 | 是否阻塞解析 | 适用场景 |
|---|---|---|---|
| async属性 | 不保证 | 否 | 独立无依赖脚本 |
| defer属性 | 保证 | 否 | 有顺序依赖的多个脚本 |
| 动态script | 不保证 | 否 | 按需加载 |
| import() | Promise控制 | 否 | ES模块按需加载 |
五、注意事项
- 带有defer的脚本应在文档末尾之前声明，确保解析完成后执行。
- 动态加载的脚本需注意跨域和错误处理，可监听onerror事件。
- 使用import()时要确认运行环境支持ES模块，或配置打包工具。
掌握js怎么实现异步加载脚本，能够显著减少页面等待时间。实际项目中可以组合使用上述方案，让关键代码优先执行，非关键资源延迟或按需加载。
js异步加载script标签defer_async修改时间：2026-07-29 01:33:18