js如何实现异步加载js文件-js教程-PHP中文网

异步加载js文件的核心方法有：1. 使用async属性，实现脚本的异步下载和立即执行，不阻塞html解析，但不保证执行顺序；2. 使用defer属性，异步下载脚本并在html解析完成后、domcontentloaded事件前按顺序执行，适合依赖dom或有依赖关系的脚本；3. 动态创建script元素，通过javascript控制加载时机，适用于按需加载、第三方集成等场景，并需处理onload和onerror事件；4. 使用es modules的动态导入（import()），返回promise，实现模块的按需异步加载。选择async还是defer取决于脚本是否依赖dom或执行顺序：独立脚本用async，依赖dom或需顺序执行的脚本用defer；动态加载需注意错误处理、避免重复加载、安全性及缓存问题，且应避免使用fetch加eval的方式。这些方法共同提升页面加载速度和用户体验，减少关键渲染路径的阻塞时间，是现代web性能优化的关键实践。

js如何实现异步加载js文件

在JavaScript中实现文件异步加载，核心在于避免脚本阻塞页面的渲染和解析。这通常通过在

<script></script>

标签上使用

async

或

defer

属性，或者利用DOM操作动态创建并插入

<script></script>

元素来完成，以此优化用户体验和页面加载速度。

解决方案

要异步加载JS文件，主要有以下几种实践方式：

使用
```
async
```
属性： 当浏览器遇到带有
```
async
```
属性的
```
<script></script>
```
标签时，它会异步下载脚本，并在下载完成后立即执行，不阻塞HTML解析，也不保证执行顺序。
```
<script async src="path/to/your/script.js"></script>
```
使用
```
defer
```
属性： 带有
```
defer
```
属性的脚本也会异步下载，但它们的执行会被推迟到HTML文档解析完成后，并且在
```
DOMContentLoaded
```
事件触发之前。
```
defer
```
脚本会按照它们在文档中出现的顺序执行。
```
<script defer src="path/to/another/script.js"></script>
```

动态创建

<script></script>

元素： 通过JavaScript代码创建并插入

<script></script>

标签，可以完全控制脚本的加载和执行时机。这种方式灵活性最高，常用于按需加载或第三方集成。

function loadScript(url, callback) {
    const script = document.createElement('script');
    script.src = url;
    script.onload = () => {
        console.log(`脚本 ${url} 加载成功！`);
        if (callback) callback();
    };
    script.onerror = () => {
        console.error(`脚本 ${url} 加载失败！`);
    };
    document.head.appendChild(script);
}

// 示例用法
loadScript('path/to/dynamic-script.js', () => {
    // 脚本加载并执行后的回调
    console.log('动态脚本功能已准备就绪。');
});

ES Modules 的动态导入（Dynamic Import）： 对于现代JavaScript模块，可以使用

import()

语法实现按需加载模块，这本身就是异步的，返回一个Promise。

// 假设有一个模块文件：myModule.js
// export function doSomething() { console.log('Module function called!'); }

// 在需要时动态加载
document.getElementById('myButton').addEventListener('click', () => {
    import('./myModule.js')
        .then(module => {
            module.doSomething();
        })
        .catch(err => {
            console.error('模块加载失败:', err);
        });
});

为什么异步加载对网页性能至关重要？

网页性能，说到底，就是用户体验。当浏览器解析HTML文档时，如果遇到一个普通的

<script></script>

标签（没有

async

或

defer

），它会停下来，先下载并执行这个脚本，然后才能继续解析HTML。这就像你在看一本书，突然被要求停下来，去听一段录音，听完才能继续看书。对于用户来说，这意味着页面可能会长时间显示空白或者内容不完整，直到所有阻塞脚本都加载并执行完毕。

异步加载，特别是

async

和

defer

，就是为了解决这个问题。它们允许浏览器在下载脚本的同时，继续解析HTML，甚至渲染页面。想象一下，你一边看书，一边耳机里放着录音，互不干扰。这显著减少了“首次内容绘制”（FCP）和“最大内容绘制”（LCP）的时间，因为DOM树可以更快地构建出来，用户能更快看到页面骨架。同时，它也降低了“总阻塞时间”（TBT），让主线程在关键渲染路径上不至于被长时间占用，从而提升了页面的响应性和交互性。从我的经验来看，尤其是在移动网络环境下，这种优化效果是立竿见影的，用户会觉得页面“快”了很多。

defer与async：我该如何选择？

defer

和

async

都是异步加载脚本的好帮手，但它们之间的细微差别决定了各自的最佳应用场景。这就像是两种不同的“并行任务”策略。

async

脚本是“野孩子”。它一旦下载完成，就会立即执行，不关心HTML解析进度，也不关心其他

page-agent 浏览器控制（CDP）

使用 page-agent CLI（CDP）控制浏览器；CLI只能通过 GitHub Release 的 .tgz 安装，npm 官方包暂未发布。

下载

async

脚本的执行顺序。这意味着，如果你有多个

async

脚本，它们的执行顺序是不确定的，谁先下载完谁就先跑。这非常适合那些独立于DOM、不依赖其他脚本，或者其执行顺序无关紧要的脚本，比如统计分析代码（Google Analytics）、广告脚本或者某些独立的工具库。它的好处是，只要脚本一下载完，就能立马发挥作用，尽可能早地执行。但缺点也很明显，如果脚本之间存在依赖关系，或者需要操作完整的DOM，

async

就可能导致问题。

defer

脚本则更“有教养”。它们也是异步下载，但会等到HTML文档解析完毕后，并且在

DOMContentLoaded

事件触发之前，按照它们在文档中出现的顺序依次执行。可以把

defer

理解为“推迟执行”，它保证了脚本的执行顺序，并且在脚本执行时，完整的DOM树已经构建好了。这使得

defer

成为加载那些依赖DOM结构或者存在相互依赖关系的脚本的理想选择，例如，你的主应用逻辑脚本、UI组件库或者任何需要操作DOM的JavaScript代码。它不会阻塞HTML解析，同时又提供了可靠的执行时机和顺序。

选择哪个，真的取决于脚本的特性：

需要尽快执行，且不依赖DOM或不关心执行顺序？
```
async
```
。
依赖DOM，需要确保执行顺序，且不希望阻塞HTML解析？
```
defer
```
。
如果你不确定，或者脚本是应用程序的核心逻辑，
```
defer
```
往往是更安全、更通用的选择。它提供了一个很好的平衡点：非阻塞加载，同时保证了执行顺序和DOM就绪。

动态创建script标签的实际应用场景与注意事项

动态创建

<script></script>

标签，也就是通过

document.createElement('script')

然后设置

src

并添加到DOM中，这种方式提供了最细粒度的控制权。它不像

async

或

defer

那样是声明式的，而是命令式的，你可以在任何时候、任何条件下触发脚本的加载。

实际应用场景：

按需加载（Lazy Loading）功能模块： 比如一个复杂的富文本编辑器或图片处理工具，只有当用户点击特定按钮时才加载其对应的JS文件，而不是在页面初始化时就全部加载。这能显著减少初始页面加载负担。
第三方SDK或小部件的集成： 很多第三方服务（如客服聊天插件、地图API、广告SDK）会提供一段JavaScript代码，让你嵌入到页面中。这些代码通常就是动态创建
```
<script></script>
```
标签来加载其核心库的。
A/B测试或功能开关： 根据用户群体或后端配置动态加载不同的JS文件，实现不同版本的界面或功能。
错误日志或性能监控： 在特定事件发生时（例如捕获到未处理的错误），才加载额外的日志上报脚本。
模块联邦（Module Federation）的运行时加载： 在微前端架构中，主应用可能需要动态加载远程组件的JS入口文件。

注意事项：

错误处理： 动态加载的脚本，其加载失败（例如网络问题、URL错误）不会直接抛出全局错误，你需要监听
```
script.onerror
```
事件来捕获并处理这些情况。这是非常关键的，否则用户可能会遇到功能缺失而你却浑然不知。
加载完成回调： 脚本加载完成后，通常需要执行一些初始化操作。监听
```
script.onload
```
事件是标准做法。如果需要支持旧版IE，可能还需要监听
```
script.onreadystatechange
```
并检查
```
readyState
```
。
避免重复加载： 在一些复杂的应用中，你可能需要确保同一个脚本不会被重复加载多次。可以在加载前检查
```
document.head
```
或
```
document.body
```
中是否已存在相同
```
src
```
的脚本标签，或者维护一个已加载脚本的Set。
安全性（CORS和XSS）： 当动态加载外部脚本时，要特别注意
```
src
```
属性的来源。如果
```
src
```
是由用户输入或其他不可信来源决定的，可能会导致跨站脚本攻击（XSS）。始终确保
```
src
```
指向可信的、经过验证的URL。
缓存： 动态加载的脚本也会被浏览器缓存，这通常是好事。但如果需要强制刷新，可能需要在URL后面添加版本号或时间戳作为查询参数。
DOM操作开销： 频繁地创建和插入DOM元素会有一定的性能开销，但在大多数场景下，对于少量脚本的动态加载，这点开销可以忽略不计。
fetch
然后
eval
？理论上，你可以用
```
fetch
```
API获取JS文件的内容，然后用
```
eval()
```
来执行它。但强烈不推荐这样做。
```
eval()
```
存在严重的安全风险（任意代码执行），且难以调试，也无法享受浏览器对脚本的缓存优化。它几乎没有合法的生产环境用例。坚持使用
```
createElement('script')
```
是更安全、更标准的做法。

动态加载为开发者提供了极大的灵活性，但随之而来的复杂性也要求我们更加严谨地考虑错误处理、加载状态和安全性。